码迷,mamicode.com
首页 > 其他好文 > 详细

datatables的Bootstrap样式的分页怎么添加首页和尾页(引)

时间:2015-07-06 19:29:44      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:

找到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="#">&larr; ‘+oLang.sPrevious+‘</a></li>‘+
32                    ‘<li class="next disabled"><a href="#">‘ + oLang.sNext + ‘</a></li>‘ + // ‘<li class="next disabled"><a href="#">‘+oLang.sNext+‘ &rarr; </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 } );

改之前显示效果:

技术分享

改之后显示效果:

技术分享

 

datatables的Bootstrap样式的分页怎么添加首页和尾页(引)

标签:

原文地址:http://www.cnblogs.com/xiaoerlang90/p/4625035.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!