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

Posted 2023-05-07

【中文标题】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(); 
);

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