'li'中的条目数 - 列表形式(在Datatable上)

时间:2014-01-07 06:33:35

标签: list drop-down-menu datatable html-lists rows

我是全新的,我会尽力解释。在每个数据表标题上我们有显示条目,我们有类似10,20,30的选项...这通常显示在选择选项中,Insted我希望它在ul li中的列表中。

1 个答案:

答案 0 :(得分:0)

你需要修改jquery.dataTables.js文件,参考下面创建菜单项长度的代码: - (请注意,这是来自jquery.dataTables.js文件的代码,你需要根据转换选择选项下拉列表进行修改到ul li list)

        /* This can be overruled by not using the _MENU_ var/macro in the language variable */
        var sName = 'name="'+oSettings.sTableId+'_length"';
        var sStdMenu = '<select size="1" '+sName+'>';
        var i, iLen;
        var aLengthMenu = oSettings.aLengthMenu;

        if ( aLengthMenu.length == 2 && typeof aLengthMenu[0] === 'object' && 
                typeof aLengthMenu[1] === 'object' )
        {
            for ( i=0, iLen=aLengthMenu[0].length ; i<iLen ; i++ )
            {
                sStdMenu += '<option value="'+aLengthMenu[0][i]+'">'+aLengthMenu[1][i]+'</option>';
            }
        }
        else
        {
            for ( i=0, iLen=aLengthMenu.length ; i<iLen ; i++ )
            {
                sStdMenu += '<option value="'+aLengthMenu[i]+'">'+aLengthMenu[i]+'</option>';
            }
        }
        sStdMenu += '</select>';

        var nLength = document.createElement( 'div' );
        if ( !oSettings.aanFeatures.l )
        {
            nLength.id = oSettings.sTableId+'_length';
        }
        nLength.className = oSettings.oClasses.sLength;
        nLength.innerHTML = '<label>'+oSettings.oLanguage.sLengthMenu.replace( '_MENU_', sStdMenu )+'</label>';

        /*
         * Set the length to the current display length - thanks to Andrea Pavlovic for this fix,
         * and Stefan Skopnik for fixing the fix!
         */
        $('select option[value="'+oSettings._iDisplayLength+'"]', nLength).attr("selected", true);

        $('select', nLength).bind( 'change.DT', function(e) {
            var iVal = $(this).val();

            /* Update all other length options for the new display */
            var n = oSettings.aanFeatures.l;
            for ( i=0, iLen=n.length ; i<iLen ; i++ )
            {
                if ( n[i] != this.parentNode )
                {
                    $('select', n[i]).val( iVal );
                }
            }

            /* Redraw the table */
            oSettings._iDisplayLength = parseInt(iVal, 10);
            _fnCalculateEnd( oSettings );

            /* If we have space to show extra rows (backing up from the end point - then do so */
            if ( oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay() )
            {
                oSettings._iDisplayStart = oSettings.fnDisplayEnd() - oSettings._iDisplayLength;
                if ( oSettings._iDisplayStart < 0 )
                {
                    oSettings._iDisplayStart = 0;
                }
            }

            if ( oSettings._iDisplayLength == -1 )
            {
                oSettings._iDisplayStart = 0;
            }

            _fnDraw( oSettings );
        } );