當前位置:編程學習大全網 - 源碼下載 - bootstrap模態框的分頁怎麽通過datatables來實現

bootstrap模態框的分頁怎麽通過datatables來實現

/* Jion 修改增加 首頁、末頁 註意修改*/

/* Set the defaults for DataTables initialisation */

$.extend( true, $.fn.dataTable.defaults, {

"sDom": "<'row'<'col-xs-6'l><'col-xs-6'f>r>t<'row'<'col-xs-6'i><'col-xs-6'p>>",

"sPaginationType": "bootstrap",

"oLanguage": {

"sLengthMenu": "_MENU_ records per page"

}

} );

/* Default class modification */

$.extend( $.fn.dataTableExt.oStdClasses, {

"sWrapper": "dataTables_wrapper form-inline",

"sFilterInput": "form-control input-sm",

"sLengthSelect": "form-control input-sm"

} );

/* 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": oSettings._iDisplayLength === -1 ?

0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),

"iTotalPages": oSettings._iDisplayLength === -1 ?

0 : 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).append(

'<ul class="pagination">'+

'<li class="first disabled"><a href="#">'+oLang.sFirst+'</a></li>'+//此處添加

'<li class="prev disabled"><a href="#">'+oLang.sPrevious+'</a></li>'+

'<li class="next disabled"><a href="#">'+oLang.sNext+'</a></li>'+

'<li class="last disabled"><a href="#">'+oLang.sLast+'</a></li>'+//此處添加

'</ul>'

);

var els = $('a', nPaging);

$(els[0]).bind( 'click.DT', { action: "first" }, fnClickHandler );//此處添加

$(els[1]).bind( 'click.DT', { action: "previous" }, fnClickHandler );

$(els[2]).bind( 'click.DT', { action: "next" }, fnClickHandler );

$(els[3]).bind( 'click.DT', { action: "last" }, fnClickHandler );//此處添加

},

"fnUpdate": function ( oSettings, fnDraw ) {

var iListLength = 5;

var oPaging = oSettings.oInstance.fnPagingInfo();

var an = oSettings.aanFeatures.p;

var i, ien, 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, ien=an.length ; i<ien ; i++ ) {

// Remove the middle elements

$('li:gt(1)', an[i]).filter(':lt(-2)').remove();//此處修改 $('li:gt(0)', an[i]).filter(':not(:last)').remove();

// Add the new list items and their event handlers

for ( j=iStart ; j<=iEnd ; j++ ) {

sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';

$('<li '+sClass+'><a href="#">'+j+'</a></li>')

.insertBefore( $('li:eq(-2)', an[i])[0] )//此處修改 .insertBefore( $('li:last', an[i])[0] )

.bind('click', function (e) {

e.preventDefault();

oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;

fnDraw( oSettings );

} );

}

// Add / remove disabled classes from the static elements

if ( oPaging.iPage === 0 ) {

$('li:lt(2)', an[i]).addClass('disabled'); //此處修改 $('li:first', an[i]).addClass('disabled');

} else {

$('li:lt(2)', an[i]).removeClass('disabled'); //此處修改$('li:first', an[i]).removeClass('disabled');

}

if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {

$('li:gt(-3)', an[i]).addClass('disabled'); //此處修改$('li:last', an[i]).addClass('disabled');

} else {

$('li:gt(-3)', an[i]).removeClass('disabled'); //此處修改$('li:last', an[i]).removeClass('disabled');

}

}

}

}

} );

/*

* TableTools Bootstrap compatibility

* Required TableTools 2.1+

*/

if ( $.fn.DataTable.TableTools ) {

// Set the classes that TableTools uses to something suitable for Bootstrap

$.extend( true, $.fn.DataTable.TableTools.classes, {

"container": "DTTT btn-group",

"buttons": {

"normal": "btn btn-default",

"disabled": "disabled"

},

"collection": {

"container": "DTTT_dropdown dropdown-menu",

"buttons": {

"normal": "",

"disabled": "disabled"

}

},

"print": {

"info": "DTTT_print_info modal"

},

"select": {

"row": "active"

}

} );

// Have the collection use a bootstrap compatible dropdown

$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {

"collection": {

"container": "ul",

"button": "li",

"liner": "a"

}

} );

}

  • 上一篇:PHP如何讀取照片的exif信息實現代碼
  • 下一篇:d3d和openGL有什麽區別
  • copyright 2024編程學習大全網