Jquery Datatables 异步分页加载数据

原创 2015年07月09日 15:58:30

正在做的一个Web项目,其中用到了jquery datatables这个表格控件,说实话挺好用的,顺便自己记录一下

首先,定义一个<table>表格

		<table id="datatable">
			<thead>
				<tr>
					<th>ID</th>
					<th>巡查单ID</th>
					<th>站点ID</th>
					<th>站点名称</th>
					<th>问题描述</th>
<span style="white-space:pre">					</span><th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>


var dtable;//定义datatable的全局变量
//其中 fnInitComplete和sSrollY属性控制datatable刷新时不整个页面刷的效果;
function doSearch() {
	if(dtable!=null){
		dtable.fnClearTable(0);
		dtable.fnDraw(); //重新加载数据
	}else{
	dtable = $("#datatable").dataTable({
		"oLanguage" : { // 汉化
			"sUrl" : "<%=path%>/DataTables/js/dataTables.language.txt"
			},
			"bStateSave" : true,
			"bJQueryUI" : true,
			"bPaginate" : true,// 分页按钮
			"bFilter" : false,// 搜索栏
			"bLengthChange" : true,// 每行显示记录数
			"iDisplayLength" : 10,// 每页显示行数
			"bSort" : false,// 排序
			"bInfo" : true,// Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
			"bWidth" : true,
			"bScrollCollapse" : true,
			"sPaginationType" : "full_numbers", // 分页,一共两种样式 另一种为two_button // 是datatables默认
			"bProcessing" : true,
			"bServerSide" : true,
			"bDestroy" : true,
			"bSortCellsTop" : true,
			"sAjaxSource" : "<%=path%>/jsp/stat.do?action=statRevampList",
			"sScrollY": "100%",
			"fnInitComplete": function() {
                this.fnAdjustColumnSizing(true);
             },
			"fnServerParams" : function(aoData) {
				aoData.push({
					"name" : "statId",
					"value" : encodeURI($("#s_statId").val())
				});
			},
			"aoColumns" : [ 
			                {"mData" : "statCleanRevampId"}, 
			                {"mData" : "statCleanId"}, 
			                {"mData" : "statId"}, 
			                {"mData" : "statName"}, 
			                {"mData" : "problemDes"}, 
			                {"mData" : "revampStatus"} ],
			"aoColumnDefs":[
			    			{
			    				"sClass":"center",
			    				"aTargets":[6],
			    				"mData":"statCleanRevampId",
			    				"mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值,c表示当前记录行对象
			    					return '<a href=\"javascript:void(0);\" onclick=\"del('+a+')\">删除</a>'
			    				+ '<a href=\"javascript:void(0);\" onclick=\"editForm('+c.statCleanRevampId+','+c.statCleanId+','
	    						+c.revampOrgan+',\''+c.statName+'\',\''+c.problemDes+'\')\">编辑</a>'
			                        + ' <a href=\"javascript:void(0);\" onclick=\"check('+a+',1)\">审核通过</a>'
			                        + ' <a href=\"javascript:void(0);\" onclick=\"check('+a+',2)\">审核不通过</a>';
			    				}
			    			},//隐藏列Index=0,1,2的三列
			    			{
			    				"aTargets":[0],
			    				"visible":false
			    			},
			    			{
			    				"aTargets":[1],
			    				"visible":false
			    			},
			    			{
			    				"aTargets":[2],
			    				"visible":false
			    			}
			    			],
			"fnRowCallback" : function(nRow, aData, iDisplayIndex) {//相当于对字段格式化
				if (aData["revampStatus"] == 0) {
					$('td:eq(5)', nRow).html("结束");
				} else if (aData["revampStatus"] == 1) {
					$('td:eq(5)', nRow).html("进行中");
				} else if (aData["revampStatus"] == 2) {
					$('td:eq(5)', nRow).html("完成");
				} else if (aData["revampStatus"] == 3) {
					$('td:eq(5)', nRow).html("驳回");
				}
			},
			"fnServerData" : function(sSource, aoData, fnCallback) {
				$.ajax({
					"type" : 'get',
					"url" : sSource,
					"dataType" : "json",
					"data" : {
						aoData : JSON.stringify(aoData)
					},
					"success" : function(resp) {
						fnCallback(resp);
					}
				});
			}
		});
	}}


后台action返回json格式数据,action方法对应如下内容

        response.setCharacterEncoding("UTF-8");
        PrintWriter out = null;
        String json = null; // 返回的json数据  
        try
        {
            out = response.getWriter();
        }
        catch (IOException e)
        {
            e.printStackTrace();
        }
        String statName = null;
        String sEcho = "0";// 记录操作的次数  每次加1
        String iDisplayStart = "0";// 起始
        String iDisplayLength = "10";// size
        int count = 0; //查询出来的数量
        String aoData = request.getParameter("aoData");
        //获取jquery datatable当前配置参数
        JSONArray jsonArray = JSONArray.fromObject(aoData);
        for (int i = 0; i < jsonArray.size(); i++)
        {
            try
            {
                JSONObject jsonObject = (JSONObject)jsonArray.get(i);
                if (jsonObject.get("name").equals("sEcho"))
                    sEcho = jsonObject.get("value").toString();
                else if (jsonObject.get("name").equals("iDisplayStart"))
                    iDisplayStart = jsonObject.get("value").toString();
                else if (jsonObject.get("name").equals("iDisplayLength"))
                    iDisplayLength = jsonObject.get("value").toString();
                else if (jsonObject.get("name").equals("statId"))
                    statName = jsonObject.get("value").toString();                
            }
            catch (Exception e)
            {
                break;
            }
        }
        
        JSONArray jsonArray2 = new JSONArray();
        JSONObject jsonObject2 = new JSONObject();
        
        StatCleanService service = new StatCleanService();
        //为操作次数加1
        int initEcho = Integer.parseInt(sEcho) + 1;
        count = service.getStatCleanRevampCount(statName);//总记录数
        List statFailList = service.getStatCleanRevampList(Integer.parseInt(iDisplayStart), Integer.parseInt(iDisplayLength), statName);
        for (Object object : statFailList)
        {
            StatCleanRevampNoticeTable table = (StatCleanRevampNoticeTable)object;
            jsonObject2.put("statCleanRevampId", table.getStatCleanRevampId());
            jsonObject2.put("statCleanId", table.getStatCleanId());
            jsonObject2.put("statId", table.getStatId());
            jsonObject2.put("statName", table.getStatName());
            jsonObject2.put("revampStatus", table.getRevampStatus());
            jsonObject2.put("problemDes", table.getProblemDes());
            jsonArray2.add(jsonObject2);
        }
        
        json = "{\"sEcho\":" + initEcho + ",\"iTotalRecords\":" + count + ",\"iTotalDisplayRecords\":" + count + ",\"aaData\":" + jsonArray2.toString() + "}";
        //传到页面  
        out.println(json);
        out.close();
其中参数
sEcho,iTotalRecords,iTotalDisplayRecords,aaData名称是固定的,不能修改;
iDisplayStart,iDisplayLength为每次查询的起始记录和长度;

加载页面url链接-->load form-->指向分页的action-->json数据返回给页面
效果图如下:


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

DataTables服务器端分页

datatables服务器端分页实现

插件介绍: DataTables 表格分页

官网: 英文:https://datatables.net/ 中文:http://www.datatables.club/引入文件(结合bootstrap样式): ...

datatables后台分页 springMVC+MyBatis PageHelper分页

前言: 1、datatables分页和查询数据库的分页是独立的,互不影响,简单的说,你后台代码怎么分页,datatables是不关心的。 2、datatables说,分页的时候,你点击任何分页属性...

datatables+java实现服务器端分页,排序,查询,列的显示影藏

最近看了下datatables,模仿写了一个小例子,和大家分享一下。效果图如下 jsp代码: ...

用jquery datatables实现页面分页,前端分页,后端分页

这两天搞了点网页上的分页,真的是搞得欲仙欲死,现在也只能说是搞了个入门的水平吧,现在就来写下这几天的收获。      用的是datatables的框架,先来个框架的地址:https://datata...

JS----dataTables分页排序

效果图: dataTables 姓名 位置 年龄 薪水 ...
  • damys
  • damys
  • 2014年09月05日 09:44
  • 24459

mybatis(pagehelper) dataTables实现分页功能

网上有一些资料,感觉都不完整,这里整理一下,方便使用 心急的直接看代码:GitHub - chenjiangtao/mybatis-pagehelper-datatables 包引入 PageHelp...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

datatables服务器分页

问题最近使用了bootstrap的datatables插件,但是在分页的时候遇到了问题。效果图解决方法引入这部分就不讲了开启服务器模式$("#example1").DataTable({ "s...

datatable分页指南--前台分页和后台分页

一。介绍 Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。 分页,即时搜索和排序几乎支持任何数据源:DOM, javascrip...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery Datatables 异步分页加载数据
举报原因:
原因补充:

(最多只允许输入30个字)