jQuery中实现，datatable后台数据获取与前端分页展示
1、依赖的插件和包文件
<!-- datatable插件引入的库文件 --><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/><script type="text/javascript" src="jquery-1.12.4.js"></script><script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
2、前端页面：
| 项目名称 | 任务描述 | 创建人 | 操作 | 报告 |
|---|
3、js部分
function showPlan(planId) {
var oTable = $(‘#table_id’).DataTable(
{
“sDom” : “<’row’<’col-md-6 col-sm-12’l><’col-md-12 col-sm-12’f>r>t<’row’<’col-md-5 col-sm-12’i><’col-md-7 col-sm-12’p>>”, //default layout without horizontal scroll(remove this setting to enable horizontal scroll for the table)
“aLengthMenu”: [
[10, 25, 50, 100, -1], // value for ajax
[10, 25, 50, 100, “All”] // name show on page
], // 单页显示行数的下拉列表
“bDestroy” : true,
“bProcessing” : true, // 打开处理中标签
“bServerSide” : true, // 打开ajax方式获取数据
“sAjaxSource” : “/plan/selectPlanCaseInfoByPlanId?planId=”+ planId,//展示所有接口数据
“fnServerData” : function(sSource,aDataSet,fnCallback){//获取服务端返回数据，aDataSet根据分页展示数据
sSource = “/plan/selectPlanCaseInfoByPlanId?planId=”+ planId;
$.ajax( {
type: “POST”,
//contentType: “application/json”, //这段代码不要加，我时延的是否后台会接受不到数据
url: sSource,
dataType:”json”,
data:{“aodata”:JSON.stringify(aDataSet)}, //以json格式传递(struts2后台还是以string类型接受),year和month直接作为参数传递。
success: function(data) {
fnCallback(data); //服务器端返回的对象的returnObject部分是要求的格式 add dyj 要请求时必须加，否则一直是“请稍候”
}
});
},
// set the initial value
“iDisplayLength” : 10, // 单页行数的初始值
“bAutoWidth” : false, //自适应宽度
// // oLangeuage 是各个地方的显示形式
“oLanguage” : {
“sProcessing” : ‘ 请稍候…’,
“sLengthMenu” : “每页显示_MENU_ 条”,
“sInfo” : “显示 _START_ 至 _END_ 条 共 _TOTAL_ 条”,
“oPaginate” : {
“sPrevious” : “上一页”,
“sNext” : “下一页”
},
“sSearch” : “搜索:_INPUT_ “
},
“aoColumnDefs” : [ {
‘bSortable’ : true,
‘aTargets’ : [ 0, 1, 2, 3, 4 ],
} ],
“aoColumns” : [ {
“sWidth” : “15%”
}, {
“sWidth” : “15%”
}, {
“sWidth” : “20%”
}, {
“sWidth” : “30%”
}, {
“sWidth” : “20%”
},
],
});
};
4、controller数据获取
@RequestMapping(value=”/selectPlanCaseInfoByPlanId”,method=RequestMethod.POST)
public JSONObject selectPlanCaseController(@RequestParam(value=”planId”,required=false) int planId,HttpServletRequest request){
List
JSONObject jsonObject=new JSONObject();
try {
String sEcho=request.getParameter(“sEcho”);//DataTables 用来生成的信息
System.out.println(“**********************“+sEcho);
String[] array=null;
ArrayList
String sSearch=””;//全局搜索字段
String iDisplayStart=””;//用于指定从哪一条数据开始显示到表格中去
String iDisplayLength=””;//用于指定一屏显示的条数，需开启分页器
// 把传送过来的JSON字符串转成JSON数组
String aodata = request.getParameter(“aodata”);
JSONArray jsonArray=JSON.parseArray(aodata);
if (jsonArray!=null) {
for(int i=0;i<jsonArray.size();i++){
if(jsonArray.getJSONObject(i).getString(“name”).equals(“sEcho”)){
sEcho = jsonArray.getJSONObject(i).getString(“value”);
}else if(jsonArray.getJSONObject(i).getString(“name”).equals(“iDisplayStart”)){
iDisplayStart = jsonArray.getJSONObject(i).getString(“value”);
}else if(jsonArray.getJSONObject(i).getString(“name”).equals(“iDisplayLength”)){
iDisplayLength = jsonArray.getJSONObject(i).getString(“value”);
}else if(jsonArray.getJSONObject(i).getString(“name”).equals(“sSearch”)){
sSearch = jsonArray.getJSONObject(i).getString(“value”);
}
}
}
fusePlanCaseEntities=planInter.selectPlanCaseInfoByPlanId(planId,sSearch);//获取用例返回结果集
int i=0;
for(FusePlanCaseEntity fusePlanCaseEntity:fusePlanCaseEntities) {
array=new String[8];
array[0] = fusePlanCaseEntity.getProjectName();
array[1] = fusePlanCaseEntity.getPlanCaseDec();
array[2] = fusePlanCaseEntity.getCreater();
array[3] = “ ”
+ "<i class='fa fa-trash-o fa-lg' title='删除' οnmοuseοver=bigMsg(this) οnmοuseοut=smallMsg(this) οnclick=deletePlanCase('"+fusePlanCaseEntity.getId()+"') ></i> "+ "<i class='fa fa-pencil fa-lg' title='编辑' οnmοuseοver=bigMsg(this) οnmοuseοut=smallMsg(this) οnclick=updateFusePlanTask('"+fusePlanCaseEntity.getId()+"') ></i>";array\[4\] = "<button class=\\"btn green\\" οnclick=showReport('"+fusePlanCaseEntity.getPlanId()+"|"+fusePlanCaseEntity.getId()+"')>报告</button>";arrays.add(array);i++;\}jsonObject.put("sEcho", sEcho);jsonObject.put("iTotalRecords", i);jsonObject.put("iTotalDisplayRecords", i);if (Integer.parseInt(iDisplayStart)+Integer.parseInt(iDisplayLength)>0) \{jsonObject.put("aaData", arrays.subList(Integer.parseInt(iDisplayStart), Integer.parseInt(iDisplayStart)+(i-Integer.parseInt(iDisplayStart))));\}else \{jsonObject.put("aaData", arrays.subList(Integer.parseInt(iDisplayStart), Integer.parseInt(iDisplayStart)+Integer.parseInt(iDisplayLength)));\}\} catch(Exception e) \{e.printStackTrace();\}System.out.println("----------------------"+jsonObject);return jsonObject;\}
5、页面效果：
备注：以上数据获取过程中涉及业务接口类、业务实现类、DAO、mapper映射已省去；重点讲述datatable数据填充。另外，时间限制这里没有实现图中搜索功能。
朴灿烈づ我的快乐病毒、
深藏阁楼爱情的钟
￡神魔★判官ぃ
系统管理员
还没有评论，来说两句吧...