Question

我正在研究自己的数据表过滤器。简而言之，它会在其中一列中放置一个日期值，并根据当前日期对其进行检查，如果其值低于当前日期，则删除整行。这完美地工作，但仅限于文档加载。我试图用一个按钮触发我的代码但它改变了我的代码的行为：而不是根据它在原始数据源中的位置来识别行（在这种情况下，表是直接用html编写的），它根据按钮识别行在当前视图中的位置。

这是一个有效的jsfiddle：http://jsfiddle.net/c18mzcox/

为了检查我所说的内容，只需单击“隐藏完成”按钮并检查要删除的行（当前视图中的索引0和6，这是错误的）。然后，编辑javascript部分并删除第22行中的按钮及其在第75行中的相应结尾。刷新并查看这次删除的行是如何不同的（索引0和6来自原始文件，这是我需要的）。没有附加任何按钮，它可以正常工作。但是将一个按钮附加到代码会改变行选择的行为......

这是我的代码：

$(document).ready( function () {

$.fn.dataTable.moment('D[ / ]M[ / ]YYYY');  
var table = $('#table_id').DataTable({

    "language": {
        "url": "http://cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Spanish.json"
    },

    "order": [[ 1, "desc" ]],

    dom: 'TC<"clear">lfrtip',

    oTableTools: {
        sSwfPath: "http://cdn.datatables.net/tabletools/2.2.3/swf/copy_csv_xls_pdf.swf"
    }

});
    //If you delete this button it behaves as it should...
    $('#btnToggleFinish').click(function(){
        //Getting the current date
        var d = new Date();
        var day = d.getDate();
        var month = d.getMonth();
        var year = d.getFullYear();
        var actualDateObj = new Date();
        actualDateObj.setDate(day);
        actualDateObj.setMonth(month);
        actualDateObj.setYear(year);

        //Selecting the column with the dates
        var idx = table.column(2).data();
        //Getting the amount of rows for the loop
        var rowCount = table.data().length;


            for (var i = 0; rowCount > i; i++)
            {
                //Getting the date values from the table
                var myDay = idx[i].substring(0,2);
                var myMonth = idx[i].substring (5,7);
                var myYear = idx[i].substring (10,14);
                var tableDateObj = new Date();
                tableDateObj.setDate(myDay);
                tableDateObj.setMonth(myMonth-1);
                tableDateObj.setYear(myYear);

                if (actualDateObj > tableDateObj) {
                    table.row(i).nodes().to$().addClass('deleteMe');    
                }   
            }
        table.rows('.deleteMe').remove().draw();
    });
});

我在这里做错了什么？非常感谢你！

Answer 1

这不是问题的正确答案，但有些对我有用。在激活我的过滤器的按钮代码里面，我放了一个table.destroy（）;之后我又在进行所有检查之前再次放置了表的构造函数。现在它按预期工作。这不是优化的，并且它不能100％工作，因为如果要撤消过滤器应用的更改，表格没有再次正确填充，但它就会出现。

$(document).ready( function () {


$.fn.dataTable.moment('D[ / ]M[ / ]YYYY');  
var table = $('#table_id').DataTable({

    "language": {
        "url": "http://cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Spanish.json"
    },

    "order": [[ 1, "desc" ]],

    dom: 'TC<"clear">lfrtip',

    oTableTools: {
        sSwfPath: "http://cdn.datatables.net/tabletools/2.2.3/swf/copy_csv_xls_pdf.swf"
    }

});

    var hided = false;

    $('#btnToggleFinish').click(function(){

        if (hided == false){

            $(this).html('<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> Show');
            hided = true;

            table.destroy();

            table = $('#table_id').DataTable({

                "language": {
                    "url": "http://cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Spanish.json"
                },

                "order": [[ 1, "desc" ]],

                dom: 'TC<"clear">lfrtip',

                oTableTools: {
                    sSwfPath: "http://cdn.datatables.net/tabletools/2.2.3/swf/copy_csv_xls_pdf.swf"
                }

            });


            var d = new Date();
            var day = d.getDate();
            var month = d.getMonth();
            var year = d.getFullYear();

            var actualDateObj = new Date();
            actualDateObj.setDate(day);
            actualDateObj.setMonth(month);
            actualDateObj.setYear(year);

            var idx = table.column(2).data();

            var rowCount = table.data().length;

                for (var i = 0; rowCount > i; i++)
                {

                    var myDay = idx[i].substring(0,2);
                    var myMonth = idx[i].substring (5,7);
                    var myYear = idx[i].substring (10,14);

                    var tableDateObj = new Date();
                    tableDateObj.setDate(myDay);
                    tableDateObj.setMonth(myMonth-1); 
                    tableDateObj.setYear(myYear);


                    if (actualDateObj > tableDateObj) {

                        table.row(i).nodes().to$().addClass('deleteMe'); 
                    }

                }
            table.rows('.deleteMe').remove().draw();

        }

        else{
            $(this).html('<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span> Hide');
            hided = false;
            table.destroy();
            table = $('#table_id').DataTable({

                "language": {
                    "url": "http://cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Spanish.json"
                },

                "order": [[ 1, "desc" ]],

                dom: 'TC<"clear">lfrtip',

                oTableTools: {
                    sSwfPath: "http://cdn.datatables.net/tabletools/2.2.3/swf/copy_csv_xls_pdf.swf"
                }

            });
        }


    });
});

在文档加载和函数调用上以不同方式选择行

1 个答案: