javascript - 在文档加载和函数调用时选择不同的行

Question

我正在为数据表开发自己的过滤器。长话短说，它获取放置在其中一列中的日期值，并根据当前日期检查它，如果它的值低于我们的当前日期，则整行将被删除。这非常有效，但仅适用于文档加载。我试图用一个按钮触发我的代码，但它改变了我的代码的行为:它不是根据它在原始数据源中的位置来识别行(在这种情况下，表是直接用 html 编写的)，而是根据它来识别行到它在当前 View 中的位置。

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

为了检查我在说什么，只需单击“隐藏完成”按钮并检查正在删除哪些行(当前 View 中的索引 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"
                }

            });
        }


    });
});