虚位以待(AD)
虚位以待(AD)
首页 > 网络编程 > AJAX相关 > AJAX +SpringMVC 实现bootstrap模态框的分页查询功能

AJAX +SpringMVC 实现bootstrap模态框的分页查询功能
类别:AJAX相关   作者:码皇   来源:互联网   点击:

这篇文章主要介绍了AJAX +SpringMVC 实现bootstrap模态框的分页查询功能,以及模态框 ajax分页实例代码分享,非常不错,具有参考借鉴价值,需要的朋友可以参考下

一 、效果图

二、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+="<div class='col-xs-4 demo1_box'>";
    rs+="<img width='200px' height='130px' src='";
    rs+=path;
    rs+="'>";
    rs=rs+"<p>"+name+"</p></div> ";
    }
    $('#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>

三、模态框

    <div style="display:none;
    " class="modal fade bs-example-modal-lg in" id="personAddModel" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false"> <div class="modal-dialog modal-lg"> <div class="modal-content" id="personAddModelContent"> <div 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> </div> <div class="modal-body"> <div class="row"> <div class="col-xs-12" id="managerList"> </div> </div> </div> <div class="modal-footer" id="pagination"> </div> </div> </div>

四、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;
    }
    }

以上所述是小编给大家介绍的bootstrap模态框 分页的实例代码 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关热词搜索: ajax 模态框 bootstrap 模态框分页 bootst