twitter-bootstrap-3 – DataTables.Net Bootstrap 3 Pagination
发布时间:2020-12-17 20:38:43 所属栏目:安全 来源:网络整理
导读:我正在关注Allan的 this plugins,它将DataTables与bootstrap集成在一起.到目前为止取得了很好的进展,我唯一缺少的是分页中的第一个和最后一个按钮(目前我有下一个/上一个按钮,但我需要Fist / Previous / [其余页面] / Next / Last按钮).在 this thread的最底
我正在关注Allan的
this plugins,它将DataTables与bootstrap集成在一起.到目前为止取得了很好的进展,我唯一缺少的是分页中的第一个和最后一个按钮(目前我有下一个/上一个按钮,但我需要Fist / Previous / [其余页面] / Next / Last按钮).在
this thread的最底层,艾伦提到了这一点
我可以在this post使用@kiarash的答案让它工作.还注意到this Github问题.有谁知道使用bootstrap paginantion获取First / last按钮的正确方法是什么? 解决方法
哦,哇所有这些示例都是错误的并且充满了语法错误.
我花了一些时间来运行它(太多的变化来单独描述它们): /* 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,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,iLen = an.length; i < iLen; i++) { // Remove the middle elements $('li:gt(1)',an[i]).filter(':not(.next,.last)').remove(); // Add the new list items and their event handlers for (j = iStart; j <= iEnd; j++) { var act = ""; if (j == oPaging.iPage + 1) { act = 'class="active"'; } $('<li ' + act + '<a href="/ref#sClass"></a>' + '<a href="#">' + j + '</a></li>') .insertBefore($('.next,.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:first',an[i]).addClass('disabled'); $('li.prev').addClass('disabled'); } else { $('li:first',an[i]).removeClass('disabled'); $('li.prev').removeClass('disabled'); } if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) { $('li:last',an[i]).addClass('disabled'); $('li.next').addClass('disabled'); } else { $('li:last',an[i]).removeClass('disabled'); $('li.next').removeClass('disabled'); } } } } }); 找一个工作的plunker here (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |