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

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

其中的样式设置

"sPaginationType": "bootstrap"

我想个这个分页加首页和尾页，不知道怎么弄.，具体解决方案如下：
解决方案1：
自己修改源代码增加了，还要修改内部的事件，有得改的。
解决方案2：
今天也碰到该问题。
自己解决了下 找到dataTables.bootstrap.js(版本3)
注:此处修改为原始代码



$.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"
}
} );


$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline",
"sFilterInput": "form-control input-sm",
"sLengthSelect": "form-control input-sm"
} );


$.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 )
};
};


$.extend( $.fn.dataTableExt.oPagination, {
"bootstrap": {
"fnInit": function( oSettings, nPaging, fnDraw ) {
var oLang = oSettings.oLanguage.oPaginate;
var fnClickHandler = function ( e ) {
e.preventDefault();....

自己解决了下 找到datatables.bootstrap.js(版本3) 注:此处修改为原始代码 javascript code $.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" } } ); $.extend( $.fn.datatableext.ostdclasses, { "swrapper": "datatables_wrapper form-inline", "sfilterinput": "form-control input-sm", "slengthselect": "form-control input-sm" } ); $.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 ) }; }; $.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( '

'+ '
• '+olang.sfirst+'
'+//此处添加 '
• '+olang.sprevious+'
'+ '
• '+olang.snext+'
'+ '
• '+olang.slast+'
'+//此处添加 '

' ); 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 // 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"' : ''; $('

'+j+'

') .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'); } } } } } ); 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" } } ); } 效果图:

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息