bootstrap模态框的分页怎么通过datatables来实现
发布网友
发布时间：2022-05-15 05:57
共2个回答
懂视网
时间：2022-05-15 10:18
一 、效果图
二、JS
function getManagerList(dealerId,page2){
macAddress = document.getElementById("activeXDemo").getMac();
$.get("${ctxPath}/common/dealer/manager?"+Math.random(), {
page2: page2,
pageSize2: 9,
dealerId: dealerId,
macAddress:macAddress
},
function(data){
if(data){
var managerList=data.managerList;
var uploadDir=data.uploadDir;
var rs = "";
for (var i=0;i<managerList.length;i++)
{
var name=managerList[i].personName;
var picPath=managerList[i].picPath;
if(picPath==null){
var path="${ctxPath}/resources/assets/imgs/no_pic.png";
}else{
var path="${ctxPath}"+uploadDir+picPath;
}
rs+="<p class='col-xs-4 demo1_box'>";
rs+="<img width='200px' height='130px' src='";
rs+=path;
rs+="'>";
rs=rs+"<p>"+name+"</p></p> ";
}
$('#managerList').empty();
$('#managerList').append(rs);
var page2=data.page2;
var stor_no2=data.stor_no2;
var pageCount2=data.pageCount2;
var pagination = "";
pagination+="<ul class='pagination pager_cus'>";
pagination=pagination+"<li><a>第 "+(page2 + 1);
pagination=pagination+" 页/共 "+pageCount2+" 页</a></li>";
pagination += "<li><a href='javascript:getManagerList("";
pagination += dealerId;
pagination += "",";
pagination += 0 + ");'>? 首页</a></li>";
if(page2>0){
pagination += "<li><a href='javascript:getManagerList("";
pagination += dealerId;
pagination += "",";
pagination += (page2 - 1) + ");'>? 上一页</a></li>";
}
var start=page2-3;
var end=page2+3;
if(start<0){
end=end-start;
}
if(end >(pageCount2-1)){
end = pageCount2-1;
start=end -7;
}
for(var j=start;j<=end;j++){
if(j>-1 && j<pageCount2){
if(page2==j){
pagination += "<li class='active'><a href='javascript:getManagerList("";
pagination += dealerId;
pagination += "",";
pagination += j + ");'>"+(j+1)+"</a></li>";
}else{
pagination += "<li><a href='javascript:getManagerList("";
pagination += dealerId;
pagination += "",";
pagination += j + ");'>"+(j+1)+"</a></li>";
}
}
}
if(page2<pageCount2-1){
pagination += "<li><a href='javascript:getManagerList("";
pagination += dealerId;
pagination += "",";
pagination += (page2 + 1) + ");'>下一页 ?</a></li>";
}
pagination += "<li><a href='javascript:getManagerList("";
pagination += dealerId;
pagination += "",";
pagination += (pageCount2 - 1) + ");'>? 尾页</a></li>";
$('#pagination').empty();
$('#pagination').append(pagination);
$('#personAddModel').modal('show');
}
}
);
}
</script>三、模态框
<p style="display:none;" class="modal fade bs-example-modal-lg in" id="personAddModel" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false"> <p class="modal-dialog modal-lg"> <p class="modal-content" id="personAddModelContent"> <p class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <span class="modal-header-title" id="myModalLabel">经营人员</span> </p> <p class="modal-body"> <p class="row"> <p class="col-xs-12" id="managerList"> </p> </p> </p> <p class="modal-footer" id="pagination"> </p> </p> </p>
四、controller
@RequestMapping(value = "manager", method =RequestMethod.GET)
public @ResponseBody ModelAndView queryManager(Model model
, @RequestParam(defaultValue = "0")int page2
, @RequestParam(defaultValue = "9")int pageSize2
, @RequestParam(required = false, defaultValue = "")String dealerId
, String macAddress){
FastJsonJsonView view = new FastJsonJsonView();
if(macAddService.checkMacAddress(macAddress, "E")==true){
String uploadDir = this.localUploadTools.getPreviewDir() + "/dealerUpload";
PaginationSupport<ManagePersonForTouchScreenVO> managerVOPS = dealerService.queryManager(dealerId, page2, pageSize2);
view.addStaticAttribute("page2", page2);
view.addStaticAttribute("uploadDir", uploadDir);
view.addStaticAttribute("managerList", managerVOPS.getObject());
view.addStaticAttribute("stor_no2", managerVOPS.getTotalCount());
view.addStaticAttribute("pageCount2", managerVOPS.getPageCount());
}
return new ModelAndView(view);
}好了，下面给大家介绍了bootstrap模态框 ajax分页实例代码，先给大家展示下效果图：
效果图：
上干货：
/**
* ajax分页
*/
$(function(){
$(".modal-body").find(".pagination").on("click","li",function(){
var totalPage=$(".modal-body").find(".pagination").find(".lilength").length;
var pageNo=$(this).find("a").text();
var beforePage="";
//获取之前选中的值
$(".modal-body").find(".pagination").find("li").each(function(){
if($(this).hasClass("active")){
beforePage=$(this).find("a").text();
}
});
//alert(beforePage);
if($(this).find("a").text()=="首页"){
removeClass();
$(".modal-body").find(".pagination").find("li").each(function(){
if($(this).find("a").text()=="1"){
$(this).addClass("active");
}
getPlanFy("1");
});
}else if($(this).find("a").text()=="上页"){
if(beforePage==1){
showMessage("已经是第一页了!")
}else{
var dqy=parseInt(beforePage)-1;
$(".modal-body").find(".pagination").find("li").each(function(){
if($(this).find("a").text()==dqy.toString()){
$(this).addClass("active");
}else{
$(this).removeClass("active");
}
});
getPlanFy(dqy);
}
}else if($(this).find("a").text()=="下页"){
if(beforePage==totalPage){
showMessage("已经是最后一页了!")
}else{
var dqy=parseInt(beforePage)+1;
$(".modal-body").find(".pagination").find("li").each(function(){
if($(this).find("a").text()==dqy.toString()){
$(this).addClass("active");
}else{
$(this).removeClass("active");
}
});
getPlanFy(dqy);
}
}else if($(this).find("a").text()=="末页"){
removeClass();
$(".modal-body").find(".pagination").find("li").each(function(){
if($(this).find("a").text()==totalPage){
$(this).addClass("active");
}
});
getPlanFy(totalPage);
}else{
removeClass();
$(this).addClass("active");
getPlanFy(pageNo);
}
});
// $(".table").find("tbody").on("click",".showMsgDetail",function(){
// var msg=$(this).find("a").attr("name");
// showMagDetail(msg);
// });
$(".addbutton").click(function(){
$("#savePlanmodal").removeAttr("name");
$("#planIdsUpdate").val("");
});
});
/**
* 弹窗
*/
function showMessage(content){
$.alert({
title: '提示',
content: content,//支持html
icon: 'fa fa-rocket',
animation: 'zoom',
closeAnimation: 'zoom',
buttons: {
okay: {
text: '确定',
btnClass: 'btn-primary'
}
}
});
}
/**
* 移除css
*/
function removeClass(){
$(".modal-body").find(".pagination").find("li").each(function(){
$(this).removeClass("active");
});
}
function getPlanFy(pageNo){
var pageSize=10;
$.post(""+otherPath+"/fault-studio/getInpectPlanList.action",
{"pageNo":pageNo,"pageSize":pageSize},function(data){
$("#inspectionPlan").find(".modal-body").find("table").find("tbody").html("");
$("#inspectionPlan").find(".modal-body").find(".pagination").html("");
var appendHtml="";
if(data.items!=null && data.items.length>0){
$.each(data.items,function(i,item){
var number=parseInt(i)+1;
appendHtml+="<tr>" +
"<td align='center'>"+number+"</td>" +
"<td><a>"+item[1]+"</a></td>" +
"<td>"+item[2]+"</td>"+
"<td>"+item[3]+"</td>"+
"<td><a name='"+item[0]+"' onclick='updatePlan(this)'>修改</a> <a lang='"+item[0]+"' onclick='delPlan(this)'>删除</a></td>"
"</tr>"
});
$("#inspectionPlan").find(".modal-body").find("table").find("tbody").append(appendHtml);
var paginHtml="";
if(isNotTirmpagin(data.totalPage) && data.totalPage>0){
paginHtml+="<li><a>首页</a></li>" +
"<li><a>上页</a></li>";
for(var j=0;j<data.totalPage;j++){
var page=parseInt(j)+1;
if(page==pageNo){
paginHtml+="<li class='lilength active'><a>"+page+"</a></li>";
}else{
paginHtml+="<li class='lilength'><a>"+page+"</a></li>";
}
}
paginHtml+="<li><a>下页</a></li>" +
"<li><a>末页</a></li>";
$("#inspectionPlan").find(".modal-body").find(".pagination").append(paginHtml);
}
}
});
}
function updatePlan(obj){
var planId=obj.name;
$.post(""+otherPath+"/fault-studio/getPlanById.action",{"id":planId},function(data){
if(data.result=="success"){
$(".addbutton").click();
var item=data.items;
$("#planName").val(item.name);
$("#planTitle").val(item.inspectTitle);
$("#showTime").val(item.inspectTime);
var module_name=item.module_name;
var nameArray=module_name.split("&");
var moudleIdArray=item.inspectContent.split("&");
var nameHtml="";
if(nameArray!=null && nameArray.length>0){
for(var i=0;i<nameArray.length;i++){
if(isNotTirmpagin(nameArray[i])){
nameHtml+="<li id='"+moudleIdArray[i]+"'>"+nameArray[i]+"</li>";
}
}
}
$(".inspectContent").append(nameHtml);
var inspectTimeArray=item.inspectTime.split("&");
var timeHtml="";
if(inspectTimeArray!=null && inspectTimeArray.length>0){
for(var j=0;j<inspectTimeArray.length;j++){
if(isNotTirmpagin(inspectTimeArray[j])){
timeHtml+="<li>"+inspectTimeArray[j]+"</li>";
}
}
}
$(".inspectionChooseTime").append(timeHtml);
$("#savePlanmodal").attr("name","update");
$("#planIdsUpdate").val(planId);
}
});
}
function delPlan(obj){
var planId=obj.lang;
sureConfirm("提示","确定删除吗?",planId);
}
function showMagDetail(msg){
$.alert({
title: '提示',
content: msg,//支持html
icon: 'fa fa-rocket',
animation: 'zoom',
closeAnimation: 'zoom',
buttons: {
okay: {
text: '确定',
btnClass: 'btn-primary'
}
}
});
}
function sureConfirm(tip,msg,planId){
$.confirm({
title: tip,
content: msg,
icon: 'fa fa-rocket',
animation: 'zoom',
closeAnimation: 'zoom',
buttons: {
confirm: {
text: '确定',
btnClass: 'btn-primary',
action:function(){
$.post(""+otherPath+"/fault-studio/delInspectPlan.action",{"id":planId},function(data){
if(data.items=="success"){
showMagDetail("删除成功");
getPlanFy("1");
}else{
showMagDetail(data.msg);
}
});
}
},
cancle: {
text: '取消',
action:function(){
return false;
}
}
},
});
}
function isNotTirmpagin(obj){
if(obj!=null && obj!='' && obj!=undefined){
return true;
}else{
return false;
}
}相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
Ajax下拉列表添加数据
Ajax跨域访问时Cookie丢失怎么解决
热心网友
时间：2022-05-15 07:26
/* 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"
}
} );
}
