datatables的Bootstrap样式的分页怎么添加首页和尾页(引)
找到dataTables.bootstrap.js(版本3)：（此项目中文件名为：dataTableExt.js）
1 $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings ) 2 { 3 return { 4 "iStart": oSettings._iDisplayStart, 5 "iEnd": oSettings.fnDisplayEnd(), 6 "iLength": oSettings._iDisplayLength, 7 "iTotal": oSettings.fnRecordsTotal(), 8 "iFilteredTotal": oSettings.fnRecordsDisplay(), 9 "iPage": oSettings._iDisplayLength === -1 ? 10 0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ), 11 "iTotalPages": oSettings._iDisplayLength === -1 ? 12 0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength ) 13 }; 14 } 15 16 /* Bootstrap style pagination control */ 17 $.extend( $.fn.dataTableExt.oPagination, { 18 "bootstrap": { 19 "fnInit": function( oSettings, nPaging, fnDraw ) { 20 var oLang = oSettings.oLanguage.oPaginate; 21 var fnClickHandler = function ( e ) { 22 e.preventDefault(); 23 if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) { 24 fnDraw( oSettings ); 25 } 26 }; 27 28 $(nPaging).addClass('pagination').append( 29 '<ul>' + 30 '<li class="sFirst disabled"><a href="#"> ' + oLang.sFirst + '</a></li>' + //添加首页显示 31 '<li class="prev disabled"><a href="#"> ' + oLang.sPrevious + '</a></li>' + // '<li class="prev disabled"><a href="#">← '+oLang.sPrevious+'</a></li>'+ 32 '<li class="next disabled"><a href="#">' + oLang.sNext + '</a></li>' + // '<li class="next disabled"><a href="#">'+oLang.sNext+' → </a></li>'+ 33 '<li class="sLast disabled"><a href="#"> ' + oLang.sLast + '</a></li>' + //添加尾页显示 34 '</ul>' 35 ); 36 var els = $('a', nPaging); 37 $(els[0]).bind('click.DT', { action: "first" }, fnClickHandler); //绑定首页事件 38 $(els[1]).bind('click.DT', { action: "previous" }, fnClickHandler); 39 $(els[2]).bind('click.DT', { action: "next" }, fnClickHandler); 40 $(els[3]).bind('click.DT', { action: "last" }, fnClickHandler);//绑定尾页事件 41 //$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler ); 42 //$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler ); 43 }, 44 45 "fnUpdate": function ( oSettings, fnDraw ) { 46 var iListLength = 5; 47 var oPaging = oSettings.oInstance.fnPagingInfo(); 48 var an = oSettings.aanFeatures.p; 49 var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2); 50 51 if ( oPaging.iTotalPages < iListLength) { 52 iStart = 1; 53 iEnd = oPaging.iTotalPages; 54 } 55 else if ( oPaging.iPage <= iHalf ) { 56 iStart = 1; 57 iEnd = iListLength; 58 } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) { 59 iStart = oPaging.iTotalPages - iListLength + 1; 60 iEnd = oPaging.iTotalPages; 61 } else { 62 iStart = oPaging.iPage - iHalf + 1; 63 iEnd = iStart + iListLength - 1; 64 } 65 66 for ( i=0, iLen=an.length ; i<iLen ; i++ ) { 67 // Remove the middle elements 68 $('li:gt(1)', an[i]).filter(':lt(-2)').remove(); // 此处修改 $('li:gt(0)', an[i]).filter(':not(:last)').remove(); 69 70 // Add the new list items and their event handlers 71 for ( j=iStart ; j<=iEnd ; j++ ) { 72 sClass = (j==oPaging.iPage+1) ? 'class="active"' : ''; 73 $('<li '+sClass+'><a href="#">'+j+'</a></li>') 74 .insertBefore($('li:eq(-2)', an[i])[0])//此处修改 .insertBefore($('li:last', an[i])[0]) 75 .bind('click', function (e) { 76 e.preventDefault(); 77 oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength; 78 fnDraw( oSettings ); 79 } ); 80 } 81 82 // Add / remove disabled classes from the static elements 83 if ( oPaging.iPage === 0 ) { 84 $('li:lt(2)', an[i]).addClass('disabled'); //此处修改 $('li:first', an[i]).addClass('disabled'); 85 } else { 86 $('li:lt(2)', an[i]).removeClass('disabled'); //此处修改 $('li:first', an[i]).removeClass('disabled'); 87 } 88 89 if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) { 90 $('li:gt(-3)', an[i]).addClass('disabled'); //此处修改 $('li:last', an[i]).addClass('disabled'); 91 } else { 92 $('li:gt(-3)', an[i]).removeClass('disabled'); //此处修改 $('li:last', an[i]).removeClass('disabled'); 93 } 94 } 95 } 96 } 97 } );
改之前显示效果：
改之后显示效果：
