datatables使用记录

最新推荐文章于 2022-02-27 21:49:39 发布

张威伦

最新推荐文章于 2022-02-27 21:49:39 发布

阅读量3.9k

点赞数

分类专栏： JAVA jfinal beetSql

本文链接：https://blog.csdn.net/qq_30259339/article/details/51151552

版权

JAVA 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

jfinal

1 篇文章 0 订阅

订阅专栏

beetSql

1 篇文章 0 订阅

订阅专栏

1：当前环境：jfinal+beetSql
2：所需文件：`jquery.dataTables.js和dataTables.bootstrap.js和bootstrap.css
3：第一步在html中建立该表格<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>序号</th> <th>权限名称</th> <th>模块名称</th> <th>控制名称</th> <th>方法名称</th> <th>操作</th> </tr> </thead> </table>
4：第二步，在该页面中引入<script src="/static/js/jquery.dataTables.min.js"></script> <script src="/static/js/dataTables.bootstrap.min.js"></script>
这两个js文件
5：第三步，自己写一个js文件并引入页面<script src="/static/js/data_table.js"></script>
6：编写data_table.js

$(document).ready(function() {
    $('#example').DataTable({
        //searching: false, //禁用搜索
        //ordering:  false, //禁用排序
        //"processing": true, //进度,开启后会闪动
        "serverSide": true, //启用服务模式
        "ajax": {
            "url": "/privilege/dataTest.html",
            //当处理大数据时，延迟渲染数据，有效提高Datatables处理能力
            "deferRender": true
        },
        "columns" : [
            {
            "data" : "id",
            "orderable" : false, // 禁用排序
            "sDefaultContent" : "",
            "width" : "6%",

        }, {
            "data" : "pri_name",
            "orderable" : false, // 禁用排序
            "sDefaultContent" : "",
            "width" : "10%"
        }, {
            "data" : "module_name",
            "orderable" : false, // 禁用排序
            "sDefaultContent" : "",
            "width" : "10%"
        },{
            "data" : "controller_name",
            "orderable" : false, // 禁用排序
            "sDefaultContent" : "",
            "width" : "3%",
            "render" : function(data, type, full, meta) {
//                      if(data==1){
//                          return data ='有效';
//                      }else{
//                          return data ='无效';
//                      }
                //return data == 1 ? '有效' : '<font color="red">无效</font>';
                if(data==1){
                    data ="<a href='#' class='upOrderStatus' data-id="+full.id+">有效</a>";
                }else{
                    data ="<a href='#' class='upOrderStatus' data-id="+full.id+"><font color='red'>无效</font></a>";
                }
                return   data;
            }
        },{
                "mData" : "action_name",
                "orderable" : false, // 禁用排序
                "sDefaultContent" : "",
                "sWidth" : "10%"
            },{
                "mData" : "id",
                "orderable" : false, // 禁用排序
                "sDefaultContent" : '',
                "sWidth" : "10%",
                "render":function(data, type, full, meta){
                    return  data='<button id="deleteOne" class="btn btn-danger btn-sm" data-id='+data+'>删 除</button>';
                }
            }]
        columnDefs: [
            {
                targets: 5, //第四列，从0开始
                render: function (a, b, c, d) {
                    // 这块可以采用我之前讲到的js模板处理：http://laytpl.layui.com/
                    var html = '<button data-id="#tpl_edit" data-action="'+ '/privilege/edit/' + c.id + '" type="button" class="js_edit am-btn am-btn-xs am-btn-primary">修改</button>'
                        + '<button data-action="'+ '/privilege/delete/' + c.id + '" type="button" class="js_del am-btn am-btn-xs am-btn-danger">删除</button>';
                    return html;
                }
            }
        ]
    });
} );

“oLanguage” : { // 国际化配置
“sProcessing” : “正在获取数据，请稍后…”,
“sLengthMenu” : “显示 MENU 条”,
“sZeroRecords” : “没有找到数据”,
“sInfo” : “从 START 到 END 条记录总记录数为 TOTAL 条”,
“sInfoEmpty” : “记录数为0”,
“sInfoFiltered” : “(全部记录数 MAX 条)”,
“sInfoPostFix” : “”,
“sSearch” : “搜索”,
“sUrl” : “”,
“oPaginate” : {
“sFirst” : “第一页”,
“sPrevious” : “上一页”,
“sNext” : “下一页”,
“sLast” : “最后一页”
}
},

    initComplete:initComplete,
        drawCallback: function( settings ) {
            $('input[name=allChecked]')[0].checked=false;
`


s


ajax表示请求的地址，columns要和返回的json数据中的字段对应，并和table中的th对应
"serverSide": true, //启用服务模式这个表示后台分页
aoColumns[]数组中表示后端返回的json数据(也和table中的th的数量一致，所以这块容易出错)，mData表示json对象的属性名，orderable是否启动排序，sDefaultContent没有这个属性的情况下的默认值，sWidth表示th的宽度，render方法表示对接收到的json数据进行处理判断后显示，`  "render" : function(data, type, full, meta) {
                //return data == 1 ? '有效' : '<font color="red">无效</font>';
                if(data==1){
                    data ="<a href='#' class='upOrderStatus' data-id="+full.id+">有效</a>";
                }else{
                    data ="<a href='#' class='upOrderStatus' data-id="+full.id+"><font color='red'>无效</font></a>";
                }
                return   data;
            }`
data表示该json属性的值，type不清楚，full表示整个json对象，就是一整行的值，d不清楚，对data进行处理，再渲染

“columnDefs” :
[{
“orderable” : false, // 禁用排序
“targets” : 0, // 指定的列
“data” : “id”,
“render” : function(data, type, full, meta) {
return ‘’;
}
}],


该段代码表示字段再定义，也就是 用来接收json数据，改变输出格式的，例如上面表示将table第0列的一个input属性
接下来是国际化配置


一般这段可以直接复制即可

initComplete:initComplete,
    drawCallback: function( settings ) {
        $('input[name=allChecked]')[0].checked=false;

上面代码表示初始化完成时的回调函数

/**
     * 表格加载渲染完毕后执行的方法
     * @param data
     */
    function initComplete(data){
        //上方topPlugin DIV中追加HTML
        //var topPlugin='<button id="addButton" class="btn btn-success btn-sm" data-toggle="modal" data-target="#addUser" style="display:block;">' +
                     // '<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加用户</button>';

        //删除用户按钮的HTMLDOM
        var topPlugin='<button   class="btn btn-danger btn-sm" id="deleteAll">批量删除</button> <button   class="btn btn-primary btn-sm addBtn" >新 增</button>             <iframe id="exp" style="display:none;"></iframe><button  class="btn btn-info btn-sm" id="expCsv">导 出全部</button>             <button  class="btn btn-warning btn-sm" id="reset">重置搜索条件</button>' ;

        $("#topPlugin").append(topPlugin);//在表格上方topPlugin DIV中追加HTML

             //$("#expCsv").on("click", exp1);//给下方按钮绑定事件

    }

7：接下来是服务端
我是jfinal+beetSql
每次datatables发送的请求都是start和length两个请求数据，所以以下是我在后台的封装`package vo;

import org.beetl.sql.core.engine.PageQuery;

import java.util.List;

/*
*author:zhangweilun
*email:18702515157@163.com
*des:
*/

public class DataTables {

private long draw;
private long recordsTotal;
private long recordsFiltered;
private List data;

public DataTables(int draw, PageQuery page,List data) {
    this.draw = draw;
    this.recordsTotal = page.getTotalRow();
    this.recordsFiltered = page.getTotalRow();
    this.data = data;
}

public long getDraw() {
    return draw;
}
public void setDraw(long draw) {
    this.draw = draw;
}
public long getRecordsTotal() {
    return recordsTotal;
}
public void setRecordsTotal(long recordsTotal) {
    this.recordsTotal = recordsTotal;
}
public long getRecordsFiltered() {
    return recordsFiltered;
}
public void setRecordsFiltered(long recordsFiltered) {
    this.recordsFiltered = recordsFiltered;
}
public List<T> getData() {
    return data;
}
public void setData(List<T> data) {
    this.data = data;
}

}
这是datatables要需要返回的json数据格式 @SuppressWarnings({ “rawtypes”, “unchecked” })
private void renderDataTable(PageQuery page,List data) {
int draw = getParaToInt(“draw”, 0);
renderJson(new DataTables(draw, page,data));
}`

int start = getParaToInt("start",0)+1;
        int length = getParaToInt("length",10);
        int pageNumber = start/length+1;
        PrivilegeS privilegeS = new PrivilegeS();
        List<Privilege> privilegeList = privilegeS.dao.all(Privilege.class,start,length);
        PageQuery pageQuery = Paginate.paginate(Privilege.class,"1_privilege.allPrivilege",pageNumber,length);
        setAttr("pageQuery",pageQuery);
        renderDataTable(pageQuery,privilegeList);

以上为控制器逻辑

自行封装请求参数

"ajax": {
                "type": "POST",
                "url":contextPath + "/dept/list.do",
                "data":function(d){
                    d.state=$("#state").val();
                    d.deptname=$("#deptname").val().trim();
                    d.startTime=$("#startTime").val();
                    d.endTime=$("#endTime").val();
                }

ajax片段增加，在搜索按钮上绑定事件
table.ajax.reload();
其中table为
var table = $(‘#example’).DataTable（）；而来

张威伦

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
datatables使用记录

1：当前环境：jfinal+beetSql 2：所需文件：`jquery.dataTables.js和dataTables.bootstrap.js和bootstrap.css 3：第一步在html中建立该表格 <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"
复制链接

扫一扫