jQuery DataTables 显示所有记录作为选项

Posted

技术标签:

【中文标题】jQuery DataTables 显示所有记录作为选项【英文标题】:jQuery DataTables display All Records as an option 【发布时间】:2012-11-10 04:20:01 【问题描述】:

我正在为我正在构建的网络应用程序使用购买的管理主题。该主题带有 jQ​​uery 数据表的样式。我试图弄清楚如何在每页记录下拉列表中添加查看所有记录选项,但是因为主题是预先设置好的,所以已经编写了很多代码,而且我不知道如何添加我需要的内容.这是我所拥有的:

页脚代码:

    <!-- jQuery DataTable -->
    <script src="<?php echo base_url(); ?>assets/js/plugins/dataTables/jquery.datatables.min.js"></script>
    <script>
        /* Default class modification */
        $.extend( $.fn.dataTableExt.oStdClasses, 
            "sWrapper": "dataTables_wrapper form-inline"
         );

        /* API method to get paging information */
        $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
        
            return 
                "iStart":         oSettings._iDisplayStart,
                "iEnd":           oSettings.fnDisplayEnd(),
                "iLength":        oSettings._iDisplayLength,
                "iTotal":         oSettings.fnRecordsTotal(),
                "iFilteredTotal": oSettings.fnRecordsDisplay(),
                "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
                "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
            ;
        

        /* Bootstrap style pagination control */
        $.extend( $.fn.dataTableExt.oPagination, 
            "bootstrap": 
                "fnInit": function( oSettings, nPaging, fnDraw ) 
                    var oLang = oSettings.oLanguage.oPaginate;
                    var fnClickHandler = function ( e ) 
                        e.preventDefault();
                        if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) 
                            fnDraw( oSettings );
                        
                    ;

                    $(nPaging).addClass('pagination').append(
                        '<ul>'+
                            '<li class="prev btn-small disabled"><a href="#"><span class="awe-caret-left"></span> '+oLang.sPrevious+'</a></li>'+
                            '<li class="next btn-small disabled"><a href="#">'+oLang.sNext+' <span class="awe-caret-right"></span></a></li>'+
                        '</ul>'
                    );
                    var els = $('a', nPaging);
                    $(els[0]).bind( 'click.DT',  action: "previous" , fnClickHandler );
                    $(els[1]).bind( 'click.DT',  action: "next" , fnClickHandler );
                ,

                "fnUpdate": function ( oSettings, fnDraw ) 
                    var iListLength = 0;
                    var oPaging = oSettings.oInstance.fnPagingInfo();
                    var an = oSettings.aanFeatures.p;
                    var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);

                    if ( oPaging.iTotalPages < iListLength) 
                        iStart = 1;
                        iEnd = oPaging.iTotalPages;
                    
                    else if ( oPaging.iPage <= iHalf ) 
                        iStart = 1;
                        iEnd = iListLength;
                     else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) 
                        iStart = oPaging.iTotalPages - iListLength + 1;
                        iEnd = oPaging.iTotalPages;
                     else 
                        iStart = oPaging.iPage - iHalf + 1;
                        iEnd = iStart + iListLength - 1;
                    

                    for ( i=0, iLen=an.length ; i<iLen ; i++ ) 

                        // Add / remove disabled classes from the static elements
                        if ( oPaging.iPage === 0 ) 
                            $('li:first', an[i]).addClass('disabled');
                         else 
                            $('li:first', an[i]).removeClass('disabled');
                        

                        if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) 
                            $('li:last', an[i]).addClass('disabled');
                         else 
                            $('li:last', an[i]).removeClass('disabled');
                        
                    
                
            
        );

    </script>

我想添加的内容(我认为,基于另一个 Stack Overflow 问题):

oTable = $('#example').dataTable( "aLengthMenu": [
        [25, 50, 100, 200, -1],
        [25, 50, 100, 200, "All"]
    ], 


"iDisplayLength" : -1 );

【问题讨论】:

我能够进入实际的 dataTables.js 文件并进行更改,但这显然不是理想的方式,因为我会在升级脚本时丢失更改。 【参考方案1】:

由于您的 oTable 是您的 dataTable 实例,请尝试:

var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = 500;
oTable.fnDraw();

您也可以将其放入onClick

var oSettings = oTable.fnSettings();

$('.changeLength').click(function(e)
   oSettings._iDisplayLength = 500;
   oTable.fnDraw(); 
);

这样,当您单击按钮时,它会更改表格长度。

【讨论】:

以上是关于jQuery DataTables 显示所有记录作为选项的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 jQuery DataTables 插件过滤带有特殊字符的结果?

JQuery UI Sortable + DataTables显示所有行而不刷新当前页面

jQuery Datatables:iDisplayLength 设置为 -1 以显示所有行

如何在PHP-jQuery中的DataTables中显示列的总和(其中所有值都是十进制值)?

jQuery DataTables - 按完全匹配过滤列

jquery datatables 在表中显示产品链接