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

问题描述

我正在使用

查询

解决方案

我会添加一个唯一的 #active 元素到 .dataTables_info :

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

然后像这样使用drawCallback

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

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

注意:如果您使用基于 DOM 的表，请使用例如 this.data()[2] 而不是 this.data().活动.

我已经添加了这个 CSS，我不知道你想如何呈现信息

.dataTables_info {浮动:左！重要；清楚:无！重要；}#积极的 {显示:内联块；边距:12px；}

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.

My table like like this

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>

解决方案

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

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

Then use drawCallback like this

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

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

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

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屋！