| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | //http://datatables.net/plug-ins/pagination#bootstrap |
| A | 2 | $.extend( true, $.fn.dataTable.defaults, { |
| 3 | "sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>", | |
| 4 | "sPaginationType": "bootstrap", | |
| 5 | "oLanguage": { | |
| 6 | "sLengthMenu": "Display _MENU_ records" | |
| 7 | } | |
| 8 | } ); | |
| 9 | ||
| 10 | ||
| 11 | /* API method to get paging information */ | |
| 12 | $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings ) | |
| 13 | { | |
| 14 | return { | |
| 15 | "iStart": oSettings._iDisplayStart, | |
| 16 | "iEnd": oSettings.fnDisplayEnd(), | |
| 17 | "iLength": oSettings._iDisplayLength, | |
| 18 | "iTotal": oSettings.fnRecordsTotal(), | |
| 19 | "iFilteredTotal": oSettings.fnRecordsDisplay(), | |
| 20 | "iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ), | |
| 21 | "iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength ) | |
| 22 | }; | |
| 23 | } | |
| 24 | ||
| 25 | /* Bootstrap style pagination control */ | |
| 26 | $.extend( $.fn.dataTableExt.oPagination, { | |
| 27 | "bootstrap": { | |
| 28 | "fnInit": function( oSettings, nPaging, fnDraw ) { | |
| 29 | var oLang = oSettings.oLanguage.oPaginate; | |
| 30 | var fnClickHandler = function ( e ) { | |
| 31 | e.preventDefault(); | |
| 32 | if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) { | |
| 33 | fnDraw( oSettings ); | |
| 34 | } | |
| 35 | }; | |
| 36 | ||
| 37 | $(nPaging).append( | |
| 38 | '<ul class="pagination">'+ | |
| 39 | '<li class="prev disabled"><a href="#"><i class="icon-double-angle-left"></i></a></li>'+ | |
| 40 | '<li class="next disabled"><a href="#"><i class="icon-double-angle-right"></i></a></li>'+ | |
| 41 | '</ul>' | |
| 42 | ); | |
| 43 | var els = $('a', nPaging); | |
| 44 | $(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler ); | |
| 45 | $(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler ); | |
| 46 | }, | |
| 47 | ||
| 48 | "fnUpdate": function ( oSettings, fnDraw ) { | |
| 49 | var iListLength = 5; | |
| 50 | var oPaging = oSettings.oInstance.fnPagingInfo(); | |
| 51 | var an = oSettings.aanFeatures.p; | |
| 52 | var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2); | |
| 53 | ||
| 54 | if ( oPaging.iTotalPages < iListLength) { | |
| 55 | iStart = 1; | |
| 56 | iEnd = oPaging.iTotalPages; | |
| 57 | } | |
| 58 | else if ( oPaging.iPage <= iHalf ) { | |
| 59 | iStart = 1; | |
| 60 | iEnd = iListLength; | |
| 61 | } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) { | |
| 62 | iStart = oPaging.iTotalPages - iListLength + 1; | |
| 63 | iEnd = oPaging.iTotalPages; | |
| 64 | } else { | |
| 65 | iStart = oPaging.iPage - iHalf + 1; | |
| 66 | iEnd = iStart + iListLength - 1; | |
| 67 | } | |
| 68 | ||
| 69 | for ( i=0, iLen=an.length ; i<iLen ; i++ ) { | |
| 70 | // Remove the middle elements | |
| 71 | $('li:gt(0)', an[i]).filter(':not(:last)').remove(); | |
| 72 | ||
| 73 | // Add the new list items and their event handlers | |
| 74 | for ( j=iStart ; j<=iEnd ; j++ ) { | |
| 75 | sClass = (j==oPaging.iPage+1) ? 'class="active"' : ''; | |
| 76 | $('<li '+sClass+'><a href="#">'+j+'</a></li>') | |
| 77 | .insertBefore( $('li:last', an[i])[0] ) | |
| 78 | .bind('click', function (e) { | |
| 79 | e.preventDefault(); | |
| 80 | oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength; | |
| 81 | fnDraw( oSettings ); | |
| 82 | } ); | |
| 83 | } | |
| 84 | ||
| 85 | // Add / remove disabled classes from the static elements | |
| 86 | if ( oPaging.iPage === 0 ) { | |
| 87 | $('li:first', an[i]).addClass('disabled'); | |
| 88 | } else { | |
| 89 | $('li:first', an[i]).removeClass('disabled'); | |
| 90 | } | |
| 91 | ||
| 92 | if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) { | |
| 93 | $('li:last', an[i]).addClass('disabled'); | |
| 94 | } else { | |
| 95 | $('li:last', an[i]).removeClass('disabled'); | |
| 96 | } | |
| 97 | } | |
| 98 | } | |
| 99 | } | |
| 100 | } ); | |
