jquery插件jquery.dataTables的使用以及jquery插件jquery.dataTables的自定义搜索

乐之者java

于 2020-06-02 23:49:23 发布

阅读量780

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/106510996

版权

前端专栏收录该内容

175 篇文章 3 订阅

订阅专栏

今天我们介绍一个：jquery.datatables插件。

datatables以下简称dt了。

dt官网：https://datatables.net/

dt中文网：http://datatables.club

先看下最终的效果：

这个例子使用了我们最常见的开发模式，即通过ajax请求java后台，并展示java后台servlet返回的json数据。在这个例子中，我涵盖了上面的整个流程，在datatables的配置部分，我也尽可能多的展示了每一个配置项的作用，我这里写的配置项都是最常用的，已经可以满足大部分日常的开发了，需要更加详细的请去参考官网吧。

关键点：看代码注释

下面我贴出全部的代码：

html的代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>dataTables</title>

<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">

<script type="text/javascript" src="media/js/jquery.js"></script>

<script type="text/javascript" src="media/js/jquery.dataTables.js"></script>

<style>

</style>

</head>

<body>

<table id="table" class="display"></table>

</body>

</html>

JavaScript代码：

<script>

var dataTables=$('#table').DataTable( {

/*

Datatables会添加一些控制元素在表格的周围，比如默认状态下改变每页显示条数（l）的空间在左上角，

搜索框（f）在右上角，表格的信息（i）显示在左下角，分页控件（p）显示在右下角。

这些控件在给大家带来便利的同时，也可能出现困惑。比如我想把l放在i的后面，我想表格的上下都有p，

我想加入自己的控件放在l的后面……这些太多了

l - Length changing 改变每页显示多少条数据的控件

f - Filtering input 即时搜索框控件

t - The Table 表格本身

i - Information 表格相关信息控件

p - Pagination 分页控件

r - pRocessing 加载等待显示信息

*/

"dom": 'lfrtip',

//info控制是否显示表格左下角类似"Showing 0 to 0 of 0 entries (filtered from 100 total entries)"的信息

info:true,

pageLength:10,//定义每页显示多少条

"destroy" : true, //销毁表格对象

"lengthMenu":[5,10],//控制左上角改变每页显示多少条数据的控件的下拉列表

"searching":true,//是否禁用搜索框

processing:true,//显示正在加载信息

autoWidth:true,//datatables自适应宽度

deferRender:true,//延迟渲染，提高初始化速度

serverSide: true,//服务端分页

stateSave:true,//保存状态 - 在页面重新加载的时候恢复状态（页码等内容）

ajax: {

url: 'xServlet',

type: 'POST',

data:{

//向后台地址传递参数的方法

"param1":"parm1的值",

"param2":"parm2的值",

}

},

columns: [

{ data: 'id',title:"编号",render:function( data, type, row, meta ){

console.log(data);//当前列的值,如：0

console.log(type);//数据类型,如：display

console.log(row);//整个row的数据,如：{....}

console.log(meta);//{row:所在行的索引，cell：所在列的索引},如{row:10,cell:0}

return data;

}

,name:"id"

,orderable:false //是否允许对该列排序

},

{ data: 'name',title:"姓名",name:"name" },

{ data: 'address',title:"住址",name:"address" },

{ data: 'date',title:"添加日期",name:"date" },

{ data: 'phone',title:"联系电话",name:"phone" },

{ data: 'email',title:"邮箱地址",name:"email" }

],

language: {

"sProcessing": "处理中...",

"sLengthMenu": "显示 _MENU_ 项结果",

"sZeroRecords": "没有匹配结果",

"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",

"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",

"sInfoFiltered": "(由 _MAX_ 项结果过滤)",

"sInfoPostFix": "",

"sSearch": "搜索:",

"sUrl": "",

"sEmptyTable": "表中数据为空",

"sLoadingRecords": "载入中...",

"sInfoThousands": ",",

"oPaginate": {

"sFirst": "首页",

"sPrevious": "上页",

"sNext": "下页",

"sLast": "末页"

},

"oAria": {

"sSortAscending": ": 以升序排列此列",

"sSortDescending": ": 以降序排列此列"

}

} );

</script>

请求的地址xServlet是由java返回的json数据：

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

*/

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException

, IOException {

response.setContentType("application/json; charset=utf-8");

//最终要返回的数据格式为json对象

Map<String, Object> retMap=new HashMap<String, Object>();

PrintWriter out = response.getWriter();

List<Map<String, Object>> dataList=new ArrayList<Map<String, Object>>();

//构造100条假数据

for (int i = 0; i < 100; i++) {

Map<String, Object> map=new HashMap<String, Object>();

map.put("id", i);

map.put("name","欧阳无敌"+i);

map.put("address", "河南省郑州市北京区武陵源"+i);

map.put("date", "2018-04-04 13:20:30"+":"+i);

map.put("phone", "11011011011"+i);

map.put("email", "ouyangwudi"+i+"@xx.com");

dataList.add(map);

}

/*返回给datatables的数据需要遵循如下格式：

* {

* data:[{..}..],//所有记录(行)

* recordsTotal:100,//总条数

* }

*/

//获取客户端传来的参数：

//第一部分：datatables自动帮我们传递的参数，可以通过f12查看具体有哪些

//start=(pageNow-1)*pageSize-1,即从第几条开始显示

String startStr= request.getParameter("start");

//每页展示多少条

String pageSizeStr=request.getParameter("length");

//第二部分：获取自定义传递的参数

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

System.out.println(param1);//输出：parm1的值

Integer start = Integer.valueOf(startStr);

Integer pageSize = Integer.valueOf(pageSizeStr);

retMap.put("data", dataList.subList(start

, start+pageSize));//data为数据

//不加recordsTotal的话左下角会出现类似"显示第 51 至 55 项结果，共 100 项"的后边"由 NaN 项结果过滤"的错误

//该项的值和iTotalDisplayRecords相等即可

retMap.put("recordsTotal", 100);

//iTotalDisplayRecords控制左下角类似"显示第 51 至 55 项结果，共 100 项"的计算以及右下角分页插件的计算

retMap.put("iTotalDisplayRecords", 100);

JSONObject jsonObject=JSONObject.fromObject(retMap);

out.println(jsonObject);

}

jquery插件jquery.dataTables的自定义搜索

我们介绍了jquery.dataTables.js的基本使用，并知道了可以通过

ajax: {

url: 'xServlet',

type: 'POST',

data:{

//向后台地址传递参数的方法

"param1":"parm1的值",

"param2":"parm2的值",

}

里面的data对象向后台地址发送额外的自定义参数，但是这里发送的参数只是展示的时候用到了，当我们在页面上有多个搜索框查询条件，我们又该怎么使用jquery.dataTables.js把查询条件传入后台呢？

在上篇文章的代码里面新增个搜索框，效果如下：

当点击搜索按钮时，触发的JavaScript事件应该如下编写代码：

//自定义搜索

$("#searchBtn").click(function(){

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

var param = {"commonselect":val}

var original=dataTables.settings()[0].ajax.data;

dataTables.settings()[0].ajax.data=$.extend(original,param);

dataTables.ajax.reload();

});

查看传入的参数：

ok，自定义参数都传入后台去了，后台增加处理参数的逻辑其余保持不变即可。