JS分页的实现（同步与异步）(2)

btns.eq(1).click( //搜索按钮点击事件 function() { //custom_dialog_form是搜索的form表单，将其搜索条件序列化后赋值给一个全局变量 mydata=$("#custom_dialog_form").serialize(); $.ajax({ type:"post", url:"CustomServlet?type=search&currentpage=1", async:true, dataType:"json", data:mydata, //传递数据 success:function(data) { DrawTable(data); $("#custom_dialog").css("display","none"); } }); } );

解决同步的搜索情况下的下一页访问到的是全部数据的下一页问题：

function InitTable(currentpage) //无搜索条件下的查询，传递一个页码 { $.ajax({ type:"get", url:"CustomServlet?type=search&currentpage="+currentpage, async:true, dataType:"json", success:function(data) { DrawTable(data); } }); } function InitTableSearch(currentpage)//有搜索添加的查询，传递页码 { $.ajax({ type:"post", url:"CustomServlet?type=search&currentpage="+currentpage, async:true, dataType:"json", data:mydata, success:function(data) { DrawTable(data); $("#custom_dialog").css("display","none"); } }); } //下一页 $("#custom_btn_next").click( function () { var currentpage=$("#custom_currunt_page").text(); //获取页面的当前页的值 var pages=$("#custom_all_page").text(); //获取总页数 currentpage++; if(currentpage<=pages) { if(mydata=="") //判断全局变量mydata是否为空，空表示没有进行搜索查询 { InitTable(currentpage); } else { InitTableSearch(currentpage); //进行条件搜索 } } });

由于是异步刷新，所以全局变量mydata是有值的，手动自己刷新页面重新加载，mydata就会初始化为空，就又默认执行 无条件搜索语句。巧妙的解决了搜索和显示全部的下一页问题，上一页首页尾页同理。

总结

以上所述是小编给大家介绍的JS分页的实现（同步与异步），希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章: