Datatables v1.10服务端模式启动js-java版本

最近在用datatables展示表格。开始的时候用客户端模式都很爽,可后来需要改成服务端模式。

看了DataTables中文网的APIdemo感觉越来越不会了。主要是DT中文网没有java实例,

摸索了一个星期,终于弄出来了。为了避免大家在DT服务端模式上走弯路,遂写下此文:

   (ps:这里只是大体写一下前后端如何联系,具体表格的外在设置,不在这里说了,相信你们都会。)

1.js部分

 

开启服务端,发送请求 -- 只传递这一次请求就够了(包括排序、查询、分页功能)

 

2.Java部分

 

参数 解释

order[0][dir]----告诉后台第一列的排序的方式

search[value]-----页面的查找的内容

start----第一条数据的起始位置,比如0代表第一条数据

Length--- 告诉服务器每页显示的条数

 

3.返回前台的数据格式

 

这个对象变成json格式,返回前台就OK了。

4.前台数据的插入

 

0-6  代表我这里有7列,分别对应我接收数据data数组中的data[i][0]--data[i][6]

。这样就可以展示了。

 

最后的最后,说一下,分页、查找、排序对应不同的sql,我是用mybatis配置的,所以就写了一句sql。而且不用在controller里判断是什么操作(分页、查询、排序)。其他的我就不说什么了。相信你们都懂了。

如果还有什么问题,请留言吧。

我是一个小菜鸟,写的不好。请指出!谢谢!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用方法: 支持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.jsdataTables.bootstrap.css) CSS实现单元格超长文字省略号显示 CSS实现单元格连续纯字母数字强制换行显示
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值