分类:
版权声明:本文为博主原创文章,未经博主允许不得转载。
一、介绍
Datatables是一款jQuery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
- 分页,即时搜索和排序
- 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
- 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
- 各式各样的扩展: Editor, TableTools, FixedColumns ……
- 丰富多样的option和强大的API
- 支持国际化
- 超过2900+个单元测试
- <link rel="stylesheet" type="text/css" href="/DataTables-1.10.7/css/jquery.dataTables.css">
- <!-- jQuery -->
- <script type="text/javascript" charset="utf8" src="/DataTables-1.10.0/js/jquery.js"></script>
- <!-- DataTables -->
- <script type="text/javascript" charset="utf8" src="/DataTables-1.10.7/js/jquery.dataTables.js"></script>
三、html
- <table class="table table-bordered table-hover" id="bigDataList">
- <thead>
- <tr>
- <th>
- 用户id
- </th>
- <th>
- 主叫
- </th>
- <th>
- 识别码
- </th>
- <th>
- 区域id
- </th>
- <th>
- 服务类型
- </th>
- <th>
- 服务组
- </th>
- <th>
- 位置区码
- </th>
- <th>
- GPRS节点
- </th>
- <th>
- 分配记数
- </th>
- <th>
- 协议类型
- </th>
- <th>
- 开始时间
- </th>
- <th>
- 结束时间
- </th>
- </tr>
- </thead>
- <tbody>
- </tbody>
- </table>
四、js代码
- var table1;
- //dataTable初始化对象
- function bigDataTable(queryData){
- table1= $('#bigDataList').DataTable({
- "paging": true,
- "lengthChange": true,
- "searching": true,
- "ordering": true,
- "aaSorting" : [[0, "asc"]], //默认的排序方式,第1列,升序排列
- "info": true,
- "autoWidth": false,
- "destroy":true,
- "processing":true,
- "scrollX": true, //水平新增滚动轴
- // "serverSide":true, //true代表后台处理分页,false代表前台处理分页
- "aLengthMenu":[10,15,20],
- "PaginationType" : "full_numbers", //详细分页组,可以支持直接跳转到某页
- //当处理大数据时,延迟渲染数据,有效提高Datatables处理能力
- "deferRender": true,
- "ajax":{
- url:"getJson_BigData_queryDataByParams",
- dataSrc:
- function(data){
- if(data.callbackCount==null){
- data.callbackCount=0;
- }
- //抛出异常
- if(data.sqlException){
- alert(data.sqlException);
- }
- //查询结束取消按钮不可用
- $("#queryDataByParams").removeAttr("disabled");
- return data.dataList; //自定义数据源,默认为data
- }, //dataSrc相当于success,在datatable里面不能用success方法,会覆盖datatable内部回调方法
- type:"post",
- data:queryData
- },
- columns:[
- { data: 'user_ip' },
- { data: 'calling'},
- { data: 'imei' },
- { data: 'cell_id'},
- { data: 'service_type' },
- { data: 'service_group'},
- { data: 'lac' },
- { data: 'sgsn'},
- { data: 'assignment_count' },
- { data: 'proto_type'},
- { data: 'start_time' },
- { data: 'end_time'},
- ],
- /*是否开启主题*/
- "bJQueryUI": true,
- "oLanguage": { // 语言设置
- "sLengthMenu": "每页显示 _MENU_ 条记录",
- "sZeroRecords": "抱歉, 没有找到",
- "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
- "sInfoEmpty": "没有数据",
- "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
- "sZeroRecords": "没有检索到数据",
- "sSearch": "检索:",
- "oPaginate": {
- "sFirst": "首页",
- "sPrevious": "前一页",
- "sNext": "后一页",
- "sLast": "尾页"
- }
- },
- });
- }
点击请求ajax,返回渲染数据:
- //点击查询
- $("#queryDataByParams").on("click",function() {
- var reg = new RegExp("^[0-9]*$");
- var startTime=$("#searchDateRange").val().substring(0,19).replace(/-/g, '/');
- var endTime=$("#searchDateRange").val().substring(22,41).replace(/-/g, '/');
- var date1=new Date(startTime); //开始时间
- var date2=new Date(endTime); //结束时间
- var date3=date2.getTime()-date1.getTime() //时间差的毫秒数
- if(date3>60*60*24*1000){
- alert("开始时间与结束时间间隔大于24小时!");
- return false;
- }
- if(!$("#searchDateRange").val() || $("#searchDateRange").val()=="填写时间段"){
- alert("时间区段不能为空!");
- return false;
- }
- if(!$("#calling").val() && !reg.test($("#calling").val())){
- alert("请输入全数字!");
- }
- //查询时候设置按钮不可用
- $("#queryDataByParams").attr("disabled", true);
- var queryData={"startseg":$("#searchDateRange").val(),
- "callseg":$("#calling").val(),
- "identifiCode":$("#identifiCode").val(),
- "areaId":$("#areaId").val(),
- "serviceType":$("#serviceType").val(),
- "serviceGroup":$("#serviceGroup").val(),
- "areaCode":$("#areaCode").val(),
- "gprsNode":$("#gprsNode").val(),
- "distritNum":$("#distritNum").val(),
- "protocolType":$("#protocolType").val()
- };
- if(table1!=null || table1 !=undefined){
- // dataTable初始化之后不能再设值,需要销毁重新定义,(数据量大时不适用)
- // table1.destroy();
- // bigDataTable(queryData);
- // var src={
- // url:"getJson_BigData_queryDataByParams",
- // dataSrc :"dataList", //自定义数据源,默认为data
- // type:"post",
- // data:{"test":$("#protocolType").val()}
- // };
- // table1.fnSettings().ajax=src; //ajax访问数据
- // table1.fnPageChange(0,true); //分页的页数从0开始
- table1.settings()[0].ajax.data=queryData;
- table1.ajax.reload();
- }else{
- bigDataTable(queryData);
- }
- });
上面是前台分页,如果要做后台分业,当然最好就是用后台分页:
1.修改datatable初始化属性,新增
- "serverSide":true, //true代表后台处理分页,false代表前台处理分页
2.后台即可获取到每页数据,当前页参数
- private int length;
- private int start:
- public int getLength(){
- return length;
- }
- public void setLength(int length){
- this.length = length;
- }
- public int getStart(){
- return start;
- }
- public void setStart(int start){
- this.start = start;
- }
我的后台是用struts2写的,其他的也可以用request里面获取,这个值初始化设置之后会一起返回给后端的,然后后端操作数据库的时候,就可以根据这两个参数就行真分页了。
- public String dataPaging(){
- resultJson = new HashMap<String,Object>();
- searchItem = getRequest().getParameter("extra_search");
- List<Log> list = new ArrayList<Log>();
- list = logService.queryForPaging(start,length,searchItem);
- int count = logService.queryForPagingSize(searchItem);
- resultJson.put("draw", Integer.toString(draw));
- resultJson.put("recordsTotal", Integer.toString(count));
- resultJson.put("recordsFiltered", Integer.toString(count));
- resultJson.put("data", list);
- return "success";
- }
- public List<T> queryForPaging(int start,int length,String query) {
- Criteria cri = getSession().createCriteria(this.persistentClass);
- cri.addOrder(Order.desc("id")).setFirstResult(start).setMaxResults(length);
- if(query != null && !"".equals(query)){
- cri.add(Restrictions.like("username", query, MatchMode.ANYWHERE));
- }
- List<T> list = cri.list();
- return list;
- }
前后台数据交互:
前台格式:
- <table id="activityList" class="table table-bordered table-hover">
- <thead>
- <tr>
- <th width="10%">ID</th>
- <th width="15%">店铺名称</th>
- <th width="15%">优惠活动</th>
- <th width="15%">开始时间</th>
- <th width="15%">结束时间</th>
- <th width="15%">操作</th>
- </tr>
- </thead>
- <tbody>
- </tbody>
- </table>
日期格式化:
- columns:[
- { data: 'id' },
- { data: 'storeInfo.realName'},
- { data: 'content' },
- { data: 'startTime',
- "render": function ( data, type, full, meta ) {
- var dataStr = Date.parse(data);
- return new Date(dataStr).Format("yyyy-MM-dd hh:mm:ss");
- }
- },
- { data: 'endTime',
- "render": function ( data, type, full, meta ) {
- var dataStr = Date.parse(data);
- return new Date(dataStr).Format("yyyy-MM-dd hh:mm:ss");
- }
- },
- {data:'id',
- "render": function ( data, type, full, meta ) {
- var edithtml ="<button class=\"btn btn-info\" type=\"button\" οnclick='editorActivity()'>编辑</button> "+
- "<button class=\"btn btn-info\" type=\"button\" οnclick='deleteActivity()'>删除</button>"
- return edithtml;
- }
- }
- ],
后台返回的json数据:
- Date.prototype.Format = function (fmt) { //author: meizz
- var o = {
- "M+": this.getMonth() + 1, //月份
- "d+": this.getDate(), //日
- "h+": this.getHours(), //小时
- "m+": this.getMinutes(), //分
- "s+": this.getSeconds(), //秒
- "q+": Math.floor((this.getMonth() + 3) / 3), //季度
- "S": this.getMilliseconds() //毫秒
- };
- if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
- for (var k in o)
- if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
- return fmt;
- }
- {
- "resultList": [
- {
- "content": "元旦大促销活动",
- "endTime": "2016-01-03T22:00:00",
- "id": 1,
- "startTime": "2016-01-01T08
- :00:00",
- "storeInfo": {
- "buildingId": 3,
- "buildingName": "一号楼",
- "floorId": 4,
- "floorName": "一层",
- "id": 1,
- "realName": "KFC",
- "siteId": 2,
- "siteName": "河西万达",
- "storeId": 7,
- "storeName": "Z1",
- "zoneId": 1,
- "zoneName": "万达企业"
- }
- },
- {
- "content": "手撕汉堡,新品上市,买一送一",
- "endTime": "2015-12-30T14:43:38",
- "id": 2,
- "startTime": "2015-12-29T14:43:34",
- "storeInfo": {
- "buildingId": 3,
- "buildingName": "一号楼",
- "floorId": 4,
- "floorName": "一层",
- "id": 1,
- "realName": "KFC",
- "siteId": 2,
- "siteName": "河西万达",
- "storeId": 7,
- "storeName": "Z1",
- "zoneId": 1,
- "zoneName": "万达企业"
- }
- },
- {
- "content": "麻麻黑,免费吃,只
- 要你能吃得完,随便吃",
- "endTime": "2016-02-15T14:45:05",
- "id": 3,
- "startTime": "2016-02-01T14:44:53",
- "storeInfo": {
- "buildingId": 3,
- "buildingName": "一号楼",
- "floorId": 4,
- "floorName": "一层",
- "id": 1,
- "realName": "KFC",
- "siteId": 2,
- "siteName": "
- 河西万达",
- "storeId": 7,
- "storeName": "Z1",
- "zoneId": 1,
- "zoneName": "万达企业"
- }
- }
- ]
- }
这种方式仅仅是一种方式另外的方式还有个人博客
Bootstrap table 分页,排序,搜索 记录