jquery 动态绑定数据并进行查询分页

//注意查询分页必须写在post 里面 $(function () {

//第一步post请求数据 $.post("/CommUnit/CommUnitSearch", "", function (result) { $(".tdy").html(""); var str = ""; for (var i = 0; i < result.length; i++) { // alert(result[i].CommodityName) $('.tdy').append( " <tr class=\"td-content\"><td>" + result[i].CommodityName + "</td> <td> <a href='/CommUnit/CommUnitSave/" + result[i].IUID + "'>修改</a> <a>删除</a> </td> </tr>") }

//第二部查询分页 //分页参数 var pageSize = 2;//每页显示数据条数 var pageIndex = "1";//当前页 var className = ".td-content";//符合条件的行 //不查询情况下页面加载的时候分页 page(pageSize, pageIndex, className); $(".prePage").click(function () { clickPrePage(); }); $(".nextPage").click(function () { clickNextPage(); });

//查找 $(".btn_search").click(function () { $(".index-page").text("1"); $(".page-all").text("1"); pageIndex = "1"; pageSize = 2; //alert($(".td-content").length); //td-search类为满足搜索条件的数据 $(".td-content").removeClass("td-search"); $(".td-content").hide(); var text_search = $(".text-search").val(); if (text_search == 0) { $(".td-content").addClass("td-search"); } else { $(".td-content:contains(" + text_search + ")").addClass("td-search"); }

//查询情况下分页 className = ".td-search"; //pageIndex = "1"; page(pageSize, pageIndex, className);

});

//点击上一页下一页时候分页 //更新pageindex //给上一页下一页赋值 //分页

//点击上一页函数 function clickPrePage() { pageIndex = $(".index-page").text(); if (pageIndex == "1")//第一页的时候上一页按钮不可用 { // $(".prePage").css("color", "#fff"); alert("当前已是第一页"); } else { pageIndex = parseInt($(".index-page").text()) - 1;

page(pageSize, pageIndex, className); }

}

//点击下一页函数 function clickNextPage() { pageIndex = $(".index-page").text(); //alert(pageIndex) var pagesum = $(".page-all").text(); if (pageIndex == pagesum || pagesum == 0)//当前页为最后一页的时候下一页按钮不可用 { // $(".nextPage").css("color", "#fff"); alert("当前已是最后一页"); } else { pageIndex = parseInt($(".index-page").text()) + 1; page(pageSize, pageIndex, className); }

}

//分页函数 function page(pageSize, pageIndex, className) { var DataLength = $(className).length; var pageYuShu = DataLength % pageSize; var pageAll; pageAll = Math.ceil(DataLength / pageSize); // alert(pageAll); $(".index-page").text(pageIndex); $(".page-all").text(pageAll); var startindex = (pageIndex - 1) * pageSize; var endindex = startindex + pageSize; //console.log("start_index:" + startindex + "endindex:" + endindex + "pageAll:" + pageAll) $(className).hide(); $(className).each(function (i) { var order = $(this).index(); if (startindex - 1 < i && i < endindex) { $(this).show(); } }); };

})

});

 

转载于:https://www.cnblogs.com/luoliangfei/p/7574433.html

相关资源：使用jquery实现表格动态分页