编辑jQuery数据表信息 [英] Edit jQuery dataTables info

问题描述

我正在使用 Jquery数据表来显示我的表.我有一列记录为活动或不活动的列.现在，我想显示具有有效值&的列数计数.在显示72个条目中的1到10后立即处于非活动状态.

I am using Jquery Data table to present my table. I have a column which has record as Active or Inactive. Now I want to display count of number of column which has value active & inactive right after where it shows Showing 1 to 10 of 72 entries.

我的桌子是这样的

jQuery

<script type="text/javascript">
        $(document).ready(function () {
            $('#example').dataTable({
                "bLengthChange": true,
                "paging": true,
                "sPaginationType": "full_numbers" ,                    //For Different Paging  Style
                "scrollY": 400,                                     // For Scrolling
                "jQueryUI": false,                                     //Enabling JQuery UI(User InterFace)
                "lengthMenu": [[30, 50, 100, -1], [30, 25, 50, "All"]],
                drawCallback: function (settings) {
                    var api = this.api(); 
                    // get the number of rows, but remove the page:current if you want number of rows in entire dataset
                    var count = api.rows({
                        api: $('#example tbody tr td[value="active"]')
                    }).data().length;
                    // this takes the count and appends it in a span tag to the dataTables pageinate div element
                    $('<span id="active_rows"></span>').html(count + ' rows').appendTo($('.dataTables_info'));
                }
            });
        });
    </script>

推荐答案

我将向.dataTables_info添加唯一的#active元素:

I would add an unique #active element to .dataTables_info :

dom: 'lfrt<"info"i<"#active">>p',

然后像这样使用drawCallback

drawCallback: function() {
  var active = 0;
  this.api().rows({'filter':'applied'}).every(function() {
    if (this.data().active == 'active') active++
  })
  $('#active').html(active+ ' active ...');    
}

演示-> http://jsfiddle.net/3dmpwokd/

demo -> http://jsfiddle.net/3dmpwokd/

注意:如果您使用的是基于DOM的表，请使用例如this.data()[2]而不是this.data().active进行评估.

Note: If you are using a DOM-based table, evaluate with for example this.data()[2] instead of this.data().active.

我已经添加了此CSS，但我不知道您想如何显示信息

I have added this CSS, I dont know how you want to present info

.dataTables_info {
  float: left !important;
  clear: none !important;
}
#active {
  display: inline-block;
  margin: 12px;
}

这篇关于编辑jQuery数据表信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！