首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Jquery数据表筛选器

Jquery数据表筛选器
EN

Stack Overflow用户
提问于 2012-03-15 20:07:29
回答 1查看 6.9K关注 0票数 3

我有一个使用日历图像的datatables的日期过滤器,它工作得很好。但是,当我清除日期时,它不会显示所有日期。

如何使按钮显示所有日期,从而清除日期筛选器?

这方面的任何帮助/建议都是很好的,提前谢谢你。

代码语言:javascript
代码运行次数:0
运行
复制
// The plugin function for adding a new filtering routine
$.fn.dataTableExt.afnFiltering.push(
        function(oSettings, aData, iDataIndex){
            var dateStart = parseDateValue($("#dateStart").val());
            // aData represents the table structure as an array of columns, so the script access the date value 
            // in the first column of the table via aData[0]
            var evalDate= parseDateValue(aData[3]);

            if (evalDate == dateStart ) {
                return true;
            }
            else {
                return false;
            }

        });

// Function for converting a mm/dd/yyyy date value into a numeric string for comparison (example 08/12/2010 becomes 20100812
function parseDateValue(rawDate) {
    var dateArray= rawDate.split("/");
    var parsedDate= dateArray[1] + dateArray[0] + dateArray[3];
    return parsedDate;
}



$(function() {
    // Implements the dataTables plugin on the HTML table
    var $oTable= $("#example").dataTable( {
        "iDisplayLength": 20,
        "oLanguage": {
            "sLengthMenu": 'Show <select><option value="25">25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select>'
        },
        "bJQueryUI": true,
        "aoColumns": [
                null,
                null,
                null,
                { "sType": "date" }
        ]                   
        }); 


    // The dataTables plugin creates the filtering and pagination controls for the table dynamically, so these 
    // lines will clone the date range controls currently hidden in the baseDateControl div and append them to 
    // the feedbackTable_filter block created by dataTables
    $dateControls= $("#baseDateControl").children("div").clone();
    $("#feedbackTable_filter").prepend($dateControls);

    // Implements the jQuery UI Datepicker widget on the date controls
    $('.datepicker').datepicker(
        {dateFormat: 'DD, d MM, yy', showOn: 'button', buttonImage: '../images/calendar.jpg', buttonImageOnly: true}
    );      

    // Create event listeners that will filter the table whenever the user types in either date range box or
    // changes the value of either box using the Datepicker pop-up calendar
    $("#dateStart").keyup ( function() { $oTable.fnDraw(); } );
    $("#dateStart").change( function() { $oTable.fnDraw(); } );

});
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-03-15 21:48:10

好吧,你有没有试过:

代码语言:javascript
代码运行次数:0
运行
复制
$.fn.dataTableExt.afnFiltering.push(
        function(oSettings, aData, iDataIndex){
            var dateStart = parseDateValue($("#dateStart").val());
            //if filter is empty return everything
            if(dateStart === ''){
                return true;
            }
            // aData represents the table structure as an array of columns, so the script access the date value 
            // in the first column of the table via aData[0]
            var evalDate= parseDateValue(aData[3]);

            if (evalDate == dateStart ) {
                return true;
            }
            else {
                return false;
            }

        });

如果这不起作用,你能在jsfiddle上发布一个例子吗?

编辑-确定问题出在parseDateValue()上,它期望使用/创建日期。因为您需要精确匹配,所以可以省略parseDateValue()

代码语言:javascript
代码运行次数:0
运行
复制
// The plugin function for adding a new filtering routine
$.fn.dataTableExt.afnFiltering.push(
    function(oSettings, aData, iDataIndex){
        var dateStart = $("#dateStart").val();
        //if filter is empty return everything
        if(dateStart === ''){
            return true;
        }
        // aData represents the table structure as an array of columns, so the script access the date value
        // in the first column of the table via aData[0]
        var evalDate= aData[3];

        if (evalDate == dateStart ) {
            return true;
        }
        else {
            return false;
        }

    });

在这里拉小提琴http://jsfiddle.net/eMZtV/1/

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9719341

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档