jquery table 分页（JQ前台分页）

本文目录

• JQ前台分页
• Jquery + Json 前台Table动态分页
• jQuery,table,josn,动态生成分页
• table表格jquery分页怎么写
• jquery动态怎么实现表格分页

JQ前台分页

对于你这种情况，最好选一个表格插件，JQ能用的第三方表格插件特别多，你想要的这些功能默认都已经支持，上手简单，且功能强大。

GridManager.js：

GridManager.js可快速的对table标签进行实例化，实例化后将实现以下功能:

• 宽度调整: 表格的列宽度可进行拖拽式调整

• 位置更换: 表格的列位置进行拖拽式调整

• 配置列: 可通过配置对列进行显示隐藏转换

• 表头吸顶: 在表存在可视区域的情况下,表头将一直存在于顶部

• 排序: 表格单项排序或组合排序

• 分页: 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能

• 用户偏好记忆: 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数

• 序号: 自动生成序号列

• 全选: 自动生成全选列

• 导出: 当前页数据下载,和仅针对已选中的表格下载

• 右键菜单: 常用功能在菜单中可进行快捷操作

• 过滤: 通过对列进行过滤达到快速搜索效果

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

• 分页，即时搜索和排序

• 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理

• 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation

• 各式各样的扩展: Editor, TableTools, FixedColumns ……

• 丰富多样的option和强大的API

• 支持国际化

Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框、复选框、排序、分页等。

更多插件可自行百度jquery table插件，类似的插件很多。

Jquery + Json 前台Table动态分页

就是和JSP，php等的分页差不多呀，不过用JAVASCRIPT时间罢了。要知道当前是第几页，共有多少条记录，每页几条就差不多了。不过话说回来，你这个方法不太好吧？如果无理解错你的意思是先把全部数据都读出来，再在前台用jquery处理分页显示？如果是这样的话，可能会浪费不少哦，比如数据库有1W条记录的话，一次过全部读出来就很浪费了，也没几个人会翻1千页吧？如果是的话那这个方法还行。

jQuery,table,josn,动态生成分页

《table cellpadding=“0“ cellspacing=“0“ border=“0“ id=“shop“》 《thead》 《tr》 《th》 《/th》 《th》Title《/th》 《th》Author(s)《/th》 《th》Publish Date《/th》 《th》Price《/th》 《/tr》 《/thead》 《tbody》 《tr》 《td》 《img src=“./img/1.gif“ width=“97“ height=“25“ alt=“Buliding Website“/》 《/td》 《td》E见周五为欧式的方式浪费时间都《/td》 《td》Nagen Graf《/td》 《td》May 2004《/td》 《td》$50.09《/td》 《/tr》 《tr》 《/tbody》《/table》《script type=“text/javascript“》$(document).ready(function(){ var $table = $(’table’); //分页效果 var currentPage = 0; //当前页 var pageSize = 10; //每页行数（不包括表头） //绑定分页事件 $table.bind(’repaginate’, function() { $table.find(’tbody tr’).hide() .slice(currentPage * pageSize, (currentPage + 1) * pageSize).show(); }); var numRows = $table.find(’tbody tr’).length; //记录宗条数 var numPages = Math.ceil(numRows/pageSize); //总页数 var $pager = $(’《div class=“page“》《/div》’); //分页div for( var page = 0; page 《 numPages; page++ ) { //为分页标签加上链接 $(’《a href=“#“ 》《span》’+ (page+1) +’《/span》《/a》’) .bind(“click“, { “newPage“: page }, function(event) { currentPage = event.data; $table.trigger(“repaginate“); }) .appendTo($pager); $pager.append(“  “); } $pager.insertAfter($table); //分页div插入table $table.trigger(“repaginate“); //初始化 });《/script》

table表格jquery分页怎么写

script language=“jscript“ type=“text/javascript“》 var pageIndex = 1; //当前页数 $(function(){ GetPageCount();//获取分页数量以及总的记录条数 $(“#load“).hide();//隐藏loading提示 $(“#template“).hide();//隐藏模板 ChangeState(0,1);//设置翻页按钮的初始状态 bind();//绑定第一页的数据 //第一页按钮click事件 $(“#first“).click(function(){ pageIndex = 1; ChangeState(0,1); bind(); }); //上一页按钮click事件 $(“#previous“).click(function(){ pageIndex -= 1; ChangeState(-1,1); if(pageIndex 《= 1){ pageIndex = 1; ChangeState(0,-1); } bind(); }); //下一页按钮click事件 $(“#next“).click(function(){ pageIndex += 1; ChangeState(1,-1); if(pageIndex》=pageCount) { pageIndex = pageCount; ChangeState(-1,0); } bind(pageIndex); }); //最后一页按钮click事件 $(“#last“).click(function(){ pageIndex = pageCount; ChangeState(1,0); bind(pageIndex); }); //每页显示记录条数select事件 $(“#pageSize“).change(function(){ bind(); }) }); //AJAX方法取得数据并显示到页面上 function bind(){ $(“#load“).show(); var pageSize = $(“#pageSize“).val(); $.ajax({ type: “get“,//使用get方法访问后台 dataType: “json“,//返回json格式的数据 url: “《%=basePath%》actionSmUser.do?method=listUser2“,//要访问的后台地址 data: “pageIndex=“ + pageIndex+“&pageSize=“+pageSize,//要发送的数据 complete : function(msg){//msg为返回的数据，在这里做数据绑定 $(““).show(); SetPageInfo(); } }); } function ChangeDate(date){ return date.replace(“-“,“/“).replace(“-“,“/“); } //设置第几页/共几页的信息 function SetPageInfo(){ var pageCount = $(“#pageCount“).val(); var totalCount = $(“#totalCount“).val(); var pageSize = $(“#pageSize“).val(); $(“#pageinfo“).html(“ 第《input class=’default_pgCurrentPage’ id=’pageIndex’ type=’text’ value=’“+pageIndex+ “’ style=’width: 30px’ /》 页“ + “/“ +“共 “+pageCount+“页“+ “ 检索到 “+totalCount+“条记录，显示第 “+(pageIndex*pageSize-pageSize)+“ 条 - 第 “+(pageIndex*pageSize)+“ 条记录“); } //AJAX方法取得分页总数 function GetPageCount(){ var pageSize = $(“#pageSize“).val(); $.ajax({ type: “get“, dataType: “text“, url: “《%=basePath%》actionSmUser.do?method=getPageCount“, data: “pageSize=“+pageSize , async: false, success: function(msg){ var data = eval(“(“+msg+“)“); $(“#pageCount“).val(data.pageCount); $(“#totalCount“).val(data.totalCount); } }); } //改变翻页按钮状态 function ChangeState(state1,state2){ $(“#first“).attr(“class“,“default_pgFirst default_pgBtn“); $(“#previous“).attr(“class“,“default_pgPrev default_pgBtn“); $(“#next“).attr(“class“,“default_pgNext default_pgBtn“); $(“#last“).attr(“class“,“default_pgLast default_pgBtn“); if(state1 == 1) { document.getElementById(“first“).disabled = ““; document.getElementById(“previous“).disabled = ““; }else if(state1 == 0){ document.getElementById(“first“).disabled = “disabled“; document.getElementById(“previous“).disabled = “disabled“; $(“#first“).attr(“class“,“default_pgFirstDisabled default_pgBtn“); $(“#previous“).attr(“class“,“default_pgPrevDisabled default_pgBtn“); }if(state2 == 1){ document.getElementById(“next“).disabled = ““; document.getElementById(“last“).disabled = ““; }else if(state2 == 0){ document.getElementById(“next“).disabled = “disabled“; document.getElementById(“last“).disabled = “disabled“; $(“#next“).attr(“class“,“default_pgNextDisabled default_pgBtn“); $(“#last“).attr(“class“,“default_pgLastDisabled default_pgBtn“); } } 《/script》 html页面代码如下： 复制代码代码如下:《body》 《div》 《div》 《br /》 《table id=“datas“ align=“center“ class=“listtable“ width=“100%“ bgcolor=“#CCCCCC“ cellSpacing=“1“ cellpadding=“1“ style=“margin-top:5px;“》 《tr class=“fixheader“》 《th width=“14%“》 用户ID《/th》 《th width=“14%“》 用户名称《/th》 《th width=“14%“》 所在科室《/th》 《th width=“14%“》 创建时间《/th》 《th width=“14%“》 创建人《/th》 《th width=“14%“》 菜单集名称《/th》 《th width=“14%“》 是否有效《/th》 《/tr》 《tr id=“template“ height=“22px“ bgcolor=“#F9FDFF“ onmouseover=“javascript:this.style.backgroundColor=’#FFFFCC’; return true;“ onMouseOut=“javascript:this.style.backgroundColor=’#F9FDFF’; return true;“》 《td id=“userId“ class=“tdc“》 《/td》 《td id=“userName“ class=“tdc“》 《/td》 《td id=“depId“ class=“tdc“》 《/td》 《td id=“createTime“ class=“tdc“》 《/td》 《td id=“creator“ class=“tdc“》 《/td》 《td id=“menusId“ class=“tdc“》 《/td》 《td id=“isValid“ class=“tdc“》 《/td》 《/tr》 《/table》 《/div》 《div id=“load“ style=“left: 0px; position: absolute; top: 0px; background-color: red“》 LOADING.... 《/div》 《div class=“default_pgContainer“ 》 《div class=“default_container“》 《div class=“default_pgPanel“ id=“skinDiv“》 《table class=“default_pgToolbar“》 《tr》 《td class=“black_pgCurrentPage“》 《select id=“pageSize“ name=“pageSize“》 《option selected=“selected“ value=“10“》10《/option》 《option value=“20“》20《/option》 《option value=“30“》30《/option》 《/select》 《/td》 《td》 《div id=“first“ class=“default_pgFirst default_pgBtn“ /》 《/td》 《td》 《div id=“previous“ class=“default_pgPrev default_pgBtn“ /》 《/td》 《td class=“default_separator“》 《/td》 《td》 《div id=“next“ class=“default_pgNext default_pgBtn“ /》 《/td》 《td》 《div id=“last“ class=“default_pgLast default_pgBtn“ /》 《/td》 《td class=“default_separator“》 《/td》 《td》 《span id=“pageinfo“》《/span》 《/td》 《/tr》 《/table》 《/div》 《/div》 《/div》 《/div》 《div id=“test“》《/div》 《input type=“hidden“ id=“pageCount“ style=“width: 45px“ /》 《input type=“hidden“ id=“totalCount“ style=“width: 45px“ /》 《/body》 后台action中代码如下： 复制代码代码如下://分页获取用户信息 public void listUser2(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response){ RequestTool tool = new RequestTool(request); Integer pageSize = tool.getIntParameter(“pageSize“); Integer pageIndex = tool.getIntParameter(“pageIndex“); ResultPage res = serviceSmUserImpl.findAllSmUsers(pageIndex, pageSize); List《SmUser》 smUserList = (List《SmUser》)res.getResult(); JSONArray array = new JSONArray(); JSONObject object ; for(SmUser user:smUserList){ object = new JSONObject(); object.put(“userId“, user.getUserId()); object.put(“userName“,user.getUserName()); object.put(“depId“, user.getOrganCode()); object.put(“createTime“, user.getCreateTime()); object.put(“creator“, user.getCreator()); object.put(“menusId“, user.getMenusId()); object.put(“isValid“, (user.getValid().equals(“1“)?“有效“:“无效“)); array.add(object); } AjaxTool.returnAjaxResponse(response, array.toJSONString()); } //获取总的记录数和总页数 public void getPageCount(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response){ RequestTool tool = new RequestTool(request); int pageSize = tool.getIntParameter(“pageSize“); List《POJO》 pojos = serviceSmUserImpl.findAll(); int pageCount = pojos.size()% pageSize 》 0 ? (pojos.size()/ pageSize+1):(pojos.size()/ pageSize); JSONArray array = new JSONArray(); JSONObject object = new JSONObject(); object.put(“pageCount“, pageCount); object.put(“totalCount“, pojos.size()); array.add(object); AjaxTool.returnAjaxResponse(response,array.toJSONString()); }

jquery动态怎么实现表格分页

《!DOCTYPE html》    《html lang=“en“》    《head》    《meta charset=“UTF-8“》    《meta name=“viewport“ content=“width=device-width, initial-scale=1.0“》    《meta http-equiv=“X-UA-Compatible“ content=“ie=edge“》    《title》Document《/title》    《/head》    《body》    《table》    《tr》    《th》1《/th》    《th》2《/th》    《th》3《/th》    《th》4《/th》    《/tr》    《/table》    《table id=“result“》    《tr》    《td》1《/td》    《td》2《/td》    《td》3《/td》    《td》4《/td》    《/tr》    《tr》    《td》1《/td》    《td》2《/td》    《td》3《/td》    《td》4《/td》    《/tr》    《tr》    《td》1《/td》    《td》2《/td》    《td》3《/td》    《td》4《/td》    《/tr》    《tr》    《td》1《/td》    《td》2《/td》    《td》3《/td》    《td》4《/td》    《/tr》    《/table》    《div id=“barcon“》《/div》    《script》    window.onload = function () {    goPage(1)    }    function goPage(pno) {    var itable = document.getElementById(“result“);    var num = itable.rows.length; //表格所有行数(所有记录数)    console.log(num);    var totalPage = 0; //总页数    var pageSize = 3; //每页显示行数    //总共分几页    if (num / pageSize 》 parseInt(num / pageSize)) {    totalPage = parseInt(num / pageSize) + 1;    } else {    totalPage = parseInt(num / pageSize);    }    var currentPage = pno; //当前页数    var startRow = (currentPage - 1) * pageSize + 1; //开始显示的行  31    var endRow = currentPage * pageSize; //结束显示的行   40    endRow = (endRow 》 num) ? num : endRow; //40    //遍历显示数据实现分页    for (var i = 1; i 《 (num + 1); i++) {    var irow = itable.rows;    if (i 》= startRow && i 《= endRow) {    irow.style.display = “table-row“;    } else {    irow.style.display = “none“;    }    }    var pageEnd = document.getElementById(“pageEnd“);    var tempStr = “《span》共“ + totalPage + “页《/span》“;    if (currentPage 》 1) {    tempStr += “《span class=’btn spanbtn’ href=\“#\“ onClick=\“goPage(“ + (1) + “)\“》首页《/span》“;    tempStr += “《span class=’btn spanbtn’ href=\“#\“ onClick=\“goPage(“ + (currentPage - 1) + “)\“》上一页《/span》“    } else {    tempStr += “《span class=’btn spanbtn’》首页《/span》“;    tempStr += “《span class=’btn spanbtn’》上一页《/span》“;    }    if (totalPage == 1) {    tempStr += “《a onclick=\“goPage(“ + currentPage + “)\“》《span class=’spanbtn nowpage pageicon’》“ + currentPage +    “《/span》《/a》“    } else if (totalPage == 2 && currentPage == 1) {    tempStr += “《a onclick=\“goPage(“ + currentPage + “)\“》《span class=’spanbtn pageicon nowpage’》“ + currentPage +    “《/span》《/a》“ + “《a onclick=\“goPage(“ + (currentPage + 1) + “)\“》《span class=’spanbtn pageicon’》“ +    (currentPage + 1) + “《/span》《/a》“    } else if (totalPage == 2 && currentPage == 2) {    tempStr += “《a onclick=\“goPage(“ + (currentPage - 1) + “)\“》《span class=’spanbtn pageicon’》“ + (currentPage -    1) + “《/span》《/a》“ + “《a onclick=\“goPage(“ + currentPage + “)\“》《span class=’spanbtn nowpage pageicon’》“ +    currentPage + “《/span》《/a》“    } else if (totalPage 》= 3 && currentPage == 1) {    tempStr += “《a onclick=\“goPage(“ + currentPage + “)\“》《span class=’spanbtn nowpage pageicon’》“ + currentPage +    “《/span》《/a》“ + “《a onclick=\“goPage(“ + (currentPage + 1) + “)\“》《span class=’spanbtn pageicon’》“ +    (currentPage + 1) +    “《/span》《/a》“ + “《a onclick=\“goPage(“ + (currentPage + 2) + “)\“》《span class=’spanbtn pageicon’》“ + (    currentPage + 2) +    “《/span》《/a》“    } else if (totalPage 》= 3 && currentPage == totalPage) {    tempStr += “《a onclick=\“goPage(“ + (currentPage - 2) + “)\“》《span class=’spanbtn pageicon’》“ + (currentPage -    2) +    “《/span》《/a》“ + “《a onclick=\“goPage(“ + (currentPage - 1) + “)\“》《span class=’spanbtn pageicon’》“ +    (currentPage - 1) +    “《/span》《/a》“ + “《a onclick=\“goPage(“ + currentPage + “)\“》《span class=’spanbtn nowpage  pageicon’》“ +    currentPage +    “《/span》《/a》“    } else {    tempStr += “《a onclick=\“goPage(“ + (currentPage - 1) + “)\“》《span class=’spanbtn pageicon’》“ + (currentPage -    1) +    “《/span》《/a》“ + “《a onclick=\“goPage(“ + currentPage + “)\“》《span class=’spanbtn nowpage pageicon’》“ +    currentPage +    “《/span》《/a》“ + “《a onclick=\“goPage(“ + (currentPage + 1) + “)\“》《span class=’spanbtn pageicon’》“ + (    currentPage + 1) +    “《/span》《/a》“    }    if (currentPage 《 totalPage) {    tempStr += “《span class=’btn spanbtn’ href=\“#\“ onClick=\“goPage(“ + (currentPage + 1) + “)\“》下一页《/span》“;    tempStr += “《span class=’btn spanbtn’ href=\“#\“ onClick=\“goPage(“ + (totalPage) + “)\“》尾页《/span》“;    } else {    tempStr += “《span class=’btn spanbtn’》下一页《/span》“;    tempStr += “《span class=’btn spanbtn’》尾页《/span》“;    }    document.getElementById(“barcon“).innerHTML = tempStr;    }    《/script》    《/body》    《/html》

自己修改一下table中元素的CSS样式，分页页码的样式，就能看出来效果了