datatables java 分页_datatables服务器端分页

本文介绍了如何使用jQuery的DataTable插件结合服务器端Java代码,实现敏感词监控系统的数据分页查询。通过AJAX请求动态加载数据,并展示了如何处理参数传递和数据筛选,是前后端交互实现数据表格动态加载的实用教程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考网址:

HTML代码:

$(document).ready(function() {

getDataTables();

});

function getDataTables(){

var title=$("input[name='gjzSelect']").val();

var selectType=$("#selectType").val();

var startTime=$("#c10").val();

var endTime=$("#c11").val();

var t = $('#example').dataTable({

"processing" : true,

"serverSide" : true,

"language"      : {

"url": '/resources/zh_CN.json',

},

"sAjaxSource" : "jiankong/selectSensitiveWordMonitor.do",

"fnServerData": retrieveData,

"searching": true,

"columns" : [

/* {"data": "id"}, */

{"data": "sensitivewordUrl"},

/* {"data": "sensitivewordLevel"},

{"data": "sensitivewordName"},

{"data": "sensitivewordHandleInfo"}, */

{"data": "sensitivewordContent"},

{"data": "taskId"},

],

});

function retrieveData(sSource, aoData, fnCallback) {

$.ajax({

//这个就是请求地址对应sAjaxSource

url : sSource,

//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数

data : {"startTime":startTime, "aoData":JSON.stringify(aoData)},

type : 'POST',

dataType : 'json',

async : false,

success : function(result) {

//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的

fnCallback(result);

},

error : function(msg) {

alert("服务器发生错误请稍后再试!");

}

});

}

}

服务器端代码

public void selectSensitiveWordMonitor(){

User user = (User) request.getSession().getAttribute("loginUser");

Map map = new HashMap();

Map mapList = new HashMap();

Map mapData = new HashMap();

StringBuffer taskIds = new StringBuffer();

List list = new ArrayList();

map.put("userName", user.getUsername());

//得到站点数据

List websiteList = service.selectWebsite(map);

if(websiteList.size() > 0){

for (UserWebSite userWebSite : websiteList) {

Map mapBack = new HashMap();

mapList.put("websiteid", userWebSite.getId());

//得到敏感词数据

List sensitiveWordList = service.selectSensitiveWord(mapList);

if( sensitiveWordList.size() > 0 ){

taskIds.append("'").append(sensitiveWordList.get(0).getTaskId()).append("',");

}

}

}

if(taskIds.length() > 0){

mapData.put("taskIds", taskIds.toString().substring(0, taskIds.length()-1));

}else{

mapData.put("taskIds", "NULL");

}

String aoData = request.getParameter("aoData");

JSONArray jsonarray = JSONArray.fromObject(aoData);

String sEcho = null; // 记录操作的次数 每次加1

String iDisplayStart ="0"; // 起始索引

String iDisplayLength = "0"; // 每页显示的行数

int orderColumn = 0;

String orderDir = "asc";

String search = "";

for (int i = 0; i 

JSONObject obj = (JSONObject) jsonarray.get(i);

if (obj.get("name").equals("sEcho"))

sEcho = obj.get("value").toString();

if (obj.get("name").equals("iDisplayStart"))

iDisplayStart = obj.getString("value");

if (obj.get("name").equals("iDisplayLength"))

iDisplayLength = obj.getString("value");

if (obj.get("name").equals("sSortDir_0"))

orderDir = obj.getString("value");

if (obj.get("name").equals("iSortCol_0"))

orderColumn = obj.getInt("value");

if (obj.get("name").equals("sSearch"))

search = obj.getString("value");

}

String orderSql = "";

//String[] cols = {"id", "sensitivewordUrl", "sensitivewordLevel","sensitivewordName","sensitivewordHandleInfo","sensitivewordContent","taskId"};

if(orderColumn != -1){

switch(orderColumn){

/*                case 0:

orderSql = " order by id ".concat(orderDir); break;*/

case 0:

orderSql = " order by sensitivewordUrl ".concat(orderDir); break;

case 1:

orderSql = " order by sensitivewordLevel ".concat(orderDir); break;

/*                case 3:

orderSql = " order by sensitivewordName ".concat(orderDir); break;

case 4:

orderSql = " order by sensitivewordHandleInfo ".concat(orderDir); break;

case 5:

orderSql = " order by sensitivewordContent ".concat(orderDir); break;

*/

case 2:

orderSql = " order by taskId ".concat(orderDir); break;

}

}

Integer recordsTotal = 0;            //表的总记录数

Integer recordsFiltered = 0;        //条件过滤后记录数

recordsTotal = service.getUserSensitiveWordInfoSum(mapData);

//List sensitiveWordInfoList = service.selectSensitiveWordInfoFiltered(map);

List sArray = new ArrayList();

if(!search.equals("")){

/*sArray.add(" id LIKE '%" + search + "%'");*/

sArray.add(" sensitivewordUrl LIKE '%" + search + "%'");

/*

sArray.add(" sensitivewordLevel LIKE '%" + search + "%'");

sArray.add(" sensitivewordName LIKE '%" + search + "%'");

sArray.add(" sensitivewordHandleInfo LIKE '%" + search + "%'");

*/

sArray.add(" sensitivewordContent LIKE '%" + search + "%'");

sArray.add(" taskId LIKE '%" + search + "%'");

}

String sumSQLWhere = "";

if(sArray.size() == 1){

sumSQLWhere = sArray.get(0);

}else if (sArray.size() > 1){

for(int i=0; i

sumSQLWhere += sArray.get(i) + " OR ";

}

sumSQLWhere += sArray.get(sArray.size()-1);

}

List lists = new ArrayList();

mapData.put("start", iDisplayStart);

mapData.put("length", iDisplayLength);

mapData.put("orderSql", orderSql);

if(search.length() > 0){

mapData.put("sumSQLWhere", sumSQLWhere);

recordsFiltered = service.getUserSensitiveWordInfoSum(mapData);

lists = service.selectSensitiveWordInfoFiltered(mapData);

}else{

recordsFiltered = recordsTotal;

lists = service.selectSensitiveWordInfoFiltered(mapData);

}

lists = service.selectSensitiveWordInfoFiltered(mapData);

JSONObject json = new JSONObject();

json.put("sEcho", sEcho);

json.put("aaData", lists);

json.put("iTotalRecords", recordsTotal);

json.put("iTotalDisplayRecords", recordsFiltered);

outString(json.toString());

}

public void outString(String str) {

try {

request.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=utf-8");

Writer out = response.getWriter();

out.write(str);

out.flush();

out.close();

} catch (IOException e) {

log.error(e.getMessage(), e);

}

}

dataTables页面进行分页,其HMTL代码如下:

$.ajax({

url:'jiankong/selectSensitiveWord.do',

cache:false,

data:{

'startTime':startTime,

'endTime':endTime,

'title' :title

},

dataType:'json',

error:function (e){

},

success:function (data){

var json=data;

html+='

html+='

';

for(var i = 0; i 

if(json[i].sensitiveWordInfoList != '0'){

for(var j=0;j

html+='

';

html+='

'+ getDateTime(json[i].securityBugTime) +'';

html+='

'+ json[i].websiteAddress +'';

html+='

'+ json[i].sensitiveWordInfoList[j].sensitivewordLevel +'';

html+='

'+ json[i].sensitiveWordInfoList[j].sensitivewordContent +'';

html+='

';

}

}

}

html+='

';

html+='

';

$("#selectSensitiveWord").html(html);

var table = $('#selectSensitiveWord_table').dataTable({

"bLengthChange": false,

"iDisplayLength": 10,

"language"      : {

"url": 'resources/zh_CN.json',

},

"searching" : false,

});

}

});

使用方法: 支持JAVA和PHP两种后台。 PHP:直接将WebRoot下的文件放到php服务器上直接运行即可,记得启用sqlite3。 JAVA:修改user-manage.js,将访问后台的url由"datasource.php"改为"datasource.jsp",然后将WebRoot下的文件放到tomcat下直接运行。也可使用Eclipse直接导入此项目文件。 简要说明: 使用DataTable默认的ajax交互功能,对传给后台和从后台获取的数据都有命名格式要求,这样一来耦合度较高,不利于后期扩展,不能直接适用于需要跟多种不同前端或其他业务交互的项目。本例子主要展示了自行封装请求参数和返回数据的用法,对后台的交互没有任何格式和命名限制。 基于Bootstrap 2.3.2,相关的其他插件包括图标控件FontAwesome、等待提示控件Spinjs(修改版)、弹窗控件lhgdialog(修改版) 主要展现: 封装请求参数(查询、排序、分页,不再需要data、dataFilter和dataSrc) 封装返回数据 自定义查询参数 服务器分页 自行控制和自定义遮罩效果 生成自定义效果的单元格(在线离线) 生成复选框单元格 响应复选框选择事件 生成操作按钮单元格 响应操作栏按钮点击事件 响应行点击事件 渲染回调事件(默认选中第一行) 分页栏增加跳页功能(直接修改了dataTables.bootstrap.js和dataTables.bootstrap.css) CSS实现单元格超长文字省略号显示 CSS实现单元格连续纯字母数字强制换行显示
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值