javascript - 数据表实现根本不起作用，Javascript/JQuery

Question

是的，这可能是显而易见的事情，但作为 jquery/javascript 的新手，这让我感到困惑。我正在学习教程(不起作用的代码是 jsfiddle.net/wqbd6qeL )。但这对我不起作用。现在我的 html 在我看来与他相似/相同。我很确定我的问题是我如何尝试实现他的代码。 javascript 正在运行，突出显示的 css 也在运行。我是否正确实现了以下内容？ (var = 表位)。

哦!和条件(==“失败”)我已经测试了几种不同的方法。不等于等。但它从不突出显示任何内容:(。但肯定会达到 css。

 <script>

       //listTable 
    var lt = $(document).ready(function () {
        $('#listTable').DataTable({
            initComplete: function () {
                var api = this.api();

                api.columns().indexes().flatten().each(function (i) {
                    var column = api.column(i);
                    var select = $('<select><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });

                    column.data().unique().sort().each(function (d, j) {
                        select.append('<option value="' + d + '">' + d + '</option>')
                    });
                });
            }
        });
              $('#addbtn').click(addRow);
    });

    //no idea why this is not working??
    var table = $('#listTable').DataTable({
        fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            if (aData[2] == "Fail") {          
                $(nRow).addClass('highlight');
            }
        }
    });

</script>

Answer 1

你应该把这个 block 放在你的评论下面

//no idea why this is not working??

函数内部

var lt = $(document).ready(function () {....}));

其实你可以复制

fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    if (aData[2] == "Fail") {          
        $(nRow).addClass('highlight');
    }
}

排在前面

initComplete: function () {

并删除评论下方的所有内容。不要忘记在 fnRowCallback 之后添加逗号。

希望这就是你想要的。

编辑:

这是最终结果:

 <script>

       //listTable 
    var lt = $(document).ready(function () {
        $('#listTable').DataTable({
            fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                if (aData[2] == "Fail") {          
                    $(nRow).addClass('highlight');
                }
            },            
            initComplete: function () {
                var api = this.api();

                api.columns().indexes().flatten().each(function (i) {
                    var column = api.column(i);
                    var select = $('<select><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });

                    column.data().unique().sort().each(function (d, j) {
                        select.append('<option value="' + d + '">' + d + '</option>')
                    });
                });
            }
        });
              $('#addbtn').click(addRow);
    });

</script>