【问题标题】:Datatables find string and add class数据表查找字符串并添加类
【发布时间】:2016-02-07 08:45:44
【问题描述】:

我尝试在我的表中查找字符串并将类添加到该行。但是这段代码不起作用。只是什么都没有发生。这是我的代码,后面我调用myTable()函数:

function myTable() {
    var selectDateVar = $('#selectDate').val();

        var table = $('#example').DataTable( { // Таблица
            "processing": true,
            "serverSide": true,
            "deferRender": true,
            "bDestroy": true,

            "sAjaxSource": "server_processing.php?data=30/09/2015",
            "order": [[ 2, "desc" ]],
            initComplete: function(){
                var api = this.api();

                new $.fn.dataTable.Buttons(api, {
                    buttons: [
                        {
                        extend: 'print',
                        text: 'Принтиране',
                        'className': 'btn-lg btn btn-warning printBTN',
                        },
                    ]
                });

                api.buttons().container().appendTo( '.printButton' );  
            }

        });

        var indexes = table.rows().eq( 0 ).filter( function (rowIdx) {
            return table.cell( rowIdx, 3 ).data() === '180' ? true : false;
        } );
        table.rows( indexes ).nodes().to$().addClass( 'highlight' );
    }

我的桌子:

我用这个例子https://datatables.net/reference/type/row-selector

【问题讨论】:

  • @Spirit 是的,我确定。

标签: datatables find addclass


【解决方案1】:
function myTable() {
    var selectDateVar = $('#selectDate').val();

    var table = $('#example').DataTable( { // Таблица
        "processing": true,
        "serverSide": true,
        "deferRender": true,
        "bDestroy": true,

        "sAjaxSource": "server_processing.php?data=30/09/2015",
        "order": [[ 2, "desc" ]],
        initComplete: function(){
            var api = this.api();
            new $.fn.dataTable.Buttons(api, {
                buttons: [
                    {
                    extend: 'print',
                    text: 'Принтиране',
                    'className': 'btn-lg btn btn-warning printBTN',
                    },
                ]
            });

            api.buttons().container().appendTo( '.printButton' );  

            //filtering code should be inside of initComplete function
            //but in your case an empty table is filtered
            var indexes = table.rows().eq( 0 ).filter( function (rowIdx) {
                 return table.cell( rowIdx, 3 ).data() === '180' ? true : false;
            } );

            table.rows( indexes ).nodes().to$().addClass( 'highlight' );
        }

    });
} 

您需要在数据加载时调用代码。目前,您在表充满服务器数据之前调用它。只需将您的代码示例添加到 initComplete 函数即可。 initComplete 将在 Ajax 数据加载后被调用。

第二个问题的答案:如果您需要跨多个列进行搜索,只需添加以下代码:

var indexes = table.rows().eq( 0 ).filter( function (rowIdx) {
    return table.cell( rowIdx, 3 ).data() === '180' &&
           table.cell( rowIdx, 0 ).data() === '521' ? true : false;
} );

【讨论】:

  • 是的,工作就像一个魅力,但如果我使用搜索、分页、排序、刷新表,这个类就消失了。有什么解决办法吗?
  • @diank - 您可以执行drawCallback 中的代码,这样每次重绘表格时都会添加该类。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-04-06
  • 2011-12-23
  • 1970-01-01
  • 1970-01-01
  • 2023-02-02
  • 2019-09-06
相关资源
最近更新 更多