1.datable blog

1. 如何此入datatable-editor插件

image

答：配置如下文件：

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/datatables/datatables.css}" rel="stylesheet"/>
<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
<link th:href="@{/editor/css/editor.dataTables.css}" rel="stylesheet"/>
<link th:href="@{/editor/css/select.dataTables.min.css}" rel="stylesheet"/>
<script th:src="@{/datatables/datatables.js}"></script>
<script th:src="@{/editor/js/dataTables.editor.js}"></script>
<script th:src="@{/editor/js/dataTables.select.min.js}"></script>

重启IDEA好了

2.如何选用插件

http://datatables.club/blog/2016/11/11/dataTables-vs-easyui-datagrid-basic-configuration.ht

  • 基础
    • 排序
    • 分页
    • 搜索
    • 美观
    • 合理的配置
  • 高级
    • 单击和双击行事
    • 选择高亮显示
    • 增删改查
    • 列宽拖动
    • 数据导出
    • 添加序号
  • 进阶
    • 支持的数据类型
    • 行内编辑
    • 合并单元格
    • 自定义表头
    • 高扩展性
    • 易用的API
    • 模块化

3. dataTable options配置

var table = $('#example').DataTable({
    "deferLoading": null,
    "destroy": false,
    "displayStart": 0,
    "dom": "lfrtip",
    "lengthMenu": [10, 25, 50, 100],
    "order": [[0, 'asc']],
    "orderCellsTop": false,
    "orderClasses": true,
    "orderFixed": [0, 'asc'],
    "orderMulti": true,
    "pageLength": 10,
    "pagingType": "simple_numbers",
    "renderer": "bootstrap",
    "retrieve": false,
    "rowId": "DT_RowId",
    "scrollCollapse": false,
    "search": {
        "caseInsensitive": true,
        "regex": false,
        "search": "Fred",
        "smart": true
    },
    "searchCols": [
        null, {
        "search": "My filter"
        },
        null,
        {
            "search": "^[0-9]",
            "escapeRegex": false
        }
    ],
    "searchDelay": null,
    "stateDuration": 7200,
    "stripeClasses": ['odd', 'even'],
    "tabIndex": 0
});

4. DataTables初始化对照模板2（全部option - Data 数据）

   http://datatables.club/manual/daily/2016/05/12/all-options-of-data.html

var table = $('#example').DataTable( {
  "ajax": {
    "url": "data.json",
    "type": "POST",
    "dataSrc": "data",
    "data": {
        "user_id": 451
    }
  },
  "data": [
      {
          "name":       "Tiger Nixon",
          "position":   "System Architect",
          "salary":     "$3,120",
          "start_date": "2011/04/25",
          "office":     "Edinburgh",
          "extn":       5421
      },
      {
          "name": "Garrett Winters",
          "position": "Director",
          "salary": "5300",
          "start_date": "2011/07/25",
          "office": "Edinburgh",
          "extn": "8422"
      },
      // ...

  ],
  //这里是为了配合上面的data，所以要写出了，之后会有对 columns 更详细的结构

  "columns": [
      { "data": "name" },
      { "data": "position" },
      { "data": "office" },
      { "data": "extn" },
      { "data": "start_date" },
      { "data": "salary" }
  ]
} );

5. DataTables初始化对照模板5（全部option - Columns 列配置）

http://datatables.club/manual/daily/2016/05/12/all-options-of-columns.html

var table = $('#example').DataTable({
    "columns": [{
        "cellType": "td",
        "className": "my_class",
        "contentPadding": "mmm",
        "createdCell": function(td, cellData, rowData, row, col) {
            if (cellData < 1) {
                $(td).css('color', 'red')
            }
        },
        "data": "engine",
        "defaultContent": "<i>Not set</i>",
        "name": "engine",
        "orderable": true,
        "orderData": [0, 1],
        "orderDataType": "dom-text",
        "orderSequence": ["asc"],
        "render": function(data, type, full, meta) {
            return '<a href="' + data + '">Download</a>';
        },
        "searchable": true,
        "title": "My column title",
        "type": "html",
        "visible": true,
        "width": "20%",
    }]
});

var table = $('#example').DataTable({
    "columnDefs": [{
        "targets": 0,
        "cellType": "td",
        "className": "my_class",
        "contentPadding": "mmm",
        "createdCell": function(td, cellData, rowData, row, col) {
            if (cellData < 1) {
                $(td).css('color', 'red')
            }
        },
        "data": "engine",
        "defaultContent": "<i>Not set</i>",
        "name": "engine",
        "orderable": true,
        "orderData": [0, 1],
        "orderDataType": "dom-text",
        "orderSequence": ["asc"],
        "render": function(data, type, full, meta) {
            return '<a href="' + data + '">Download</a>';
        },
        "searchable": true,
        "title": "My column title",
        "type": "html",
        "visible": true,
        "width": "20%",
    }]
});
6.DataTables初始化对照模板3（全部option - Callbacks 回调函数）
   http://datatables.club/manual/daily/2016/05/12/all-options-of-callbacks.html
var table = $('#example').DataTable({
    "createdRow": function(row, data, dataIndex) {
        if (data[4] == "A") {
            $(row).addClass('important');
        }
    },
    "drawCallback": function(settings) {
        alert('DataTables has redrawn the table');
    },
    "footerCallback": function(tfoot, data, start, end, display) {
        $(tfoot).find('th').eq(0).html("Starting index is " + start);
    },
    "formatNumber": function(toFormat) {
        return toFormat.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "'");
    },
    "headerCallback": function(thead, data, start, end, display) {
        $(thead).find('th').eq(0).html('Displaying ' + (end - start) + ' records');
    },
    "infoCallback": function(settings, start, end, max, total, pre) {
        return start + " to " + end;
    },
    "initComplete": function(settings, json) {
        alert('DataTables has finished its initialisation.');
    },
    "preDrawCallback": function(settings) {
        $('#example tbody').off('click', 'td');
    },
    "rowCallback": function(row, data, index) {
        if (data.grade == "A") {
            $('td:eq(4)', row).html('<b>A</b>');
        }
    },
    "stateLoadCallback": function(settings) {
        var o;
        // Send an Ajax request to the server to get the data. Note that

        // this is a synchronous request since the data is expected back from the

        // function

        $.ajax({
            "url": "/state_load",
            "async": false,
            "dataType": "json",
            "success": function(json) {
                o = json;
            }
        });
        return o;
    },
    "stateLoaded": function(settings, data) {
        alert('Saved filter was: ' + data.search.search);
    },
    "stateLoadParams": function(settings, data) {
        data.search.search = "";
    },
    "stateSaveCallback": function(settings, data) {
        // Send an Ajax request to the server with the state object

        $.ajax({
            "url": "/state_save",
            "data": data,
            "dataType": "json",
            "type": "POST",
            "success": function() {}
        });
    },
    "stateSaveParams": function(settings, data) {
        data.search.search = "";
    }
});
7.option stripeClasses 给表格行设置条纹样式

http://datatables.club/manual/daily/2016/05/11/option-stripeClasses.html

默认情况下，Datatables就已经把行和行区分开了，使用的是 $.fn.dataTable.ext.classes.stripe* 选项，值为 odd 和 even

stripeClassesOption stripeClasses不定时一讲 接受的是一个数组

定义三个不同的样式


1
2
3
var table = $('#example').DataTable( {
  "stripeClasses": [ 'strip1', 'strip2', 'strip3' ]
} );

stripeClasses 可以是任意长度的数组，你设置2个，那么就1 2 ， 1 2 ， 1 2 这么循环，如果设置3个就是 1 2 3， 1 2 3， 1 2 3，这么循环

8. option dom 自定义布局表格

http://datatables.club/manual/daily/2016/05/11/option-dom.html

9.option rowId 给每行（tr）自动绑定上唯一id

http://datatables.club/manual/daily/2016/05/06/option-rowId.html

10.option DT_RowData 使用jQuery.data()方法给每行（tr）绑定数据

http://datatables.club/manual/daily/2016/05/06/option-DT_RowData.html

12.如何定位问题（js调试基本技能）

http://datatables.club/manual/daily/2016/04/22/how-to-find-the-questions-basic-debug-skill-of-javascript.html

切换到network功能，在这里可以看到所有的资源请求，那么这里我们根据代码里定义的数据url arrays.txt 关键字在搜索框里过滤后找到我们的请求。 从上两个图可以在headers部分看到请求的url，请求的参数，在preview部分可以看到返回的数据，那么当你遇到问题后不知道怎么解决的时候， 就应该从这些地方检察，或者贴图在群里。切记不要空喊，为什么没效果，为什么？为什么？为什么？ 不贴代码，不贴效果图片，不贴错误提示，我们也不知道为什么。

最后再说一点，使用console.log() 替换 alert() ,不说console.log()是最好用的， 但至少比alert()强百倍，在调试代码的过程中绝对是大臣。希望从这一讲中，大家在遇到问题时， 能更快速的定位到问题，即便自己不能快速定位，把这些信息都贴到群里，群友也能帮你快速定位到问题所在

13 option ajax data 根据参数查询表格数据

http://datatables.club/manual/daily/2016/04/21/option-ajax-data.html

这连续几天讲的都是关于dt怎么取数，今天讲讲怎么传参数给服务器。平时我们都有这样的应用场景，比如根据时间，或者input框的值作为查询条件显示表格数据 基本用法：

var table = $("#tableid").DataTable({
    ajax:{
        url:"data.action",
        type:"POST",
       data:{
            beginDate:"2016-04-18",
            endDate:"2016-04-21"
        }
    },
    columns:[
        {data:"name"},
        {data:"age"}
    ]
});

看到上面的代码，我不得不又把jQuery的ajax又拿出来说，应为这个可以说就是jQuery的ajax，基本是一样的用法，下面看看jQuery的ajax


$.ajax({
    url:"data.action",
    type:"POST",
   data:{
        args1:"123",
        args2:"456"
    },
    success:function(result){
        console.log(result);
    }
});

是不是发现是基本一模一样的？不用对比了，其实就是一样的，那么这两段代码的含义就是带上了两个参数，这样在服务器就可以接收到

比如服务器语言是java，那么你可以这么接受

request.getParameter("beginDate");//获取到起始时间，截止时间类同

如果你是php，那么你可以这么接受

$_POST['beginDate'];

这样你就可以根据页面传来的参数对数据进行处理，达到根据条件改变表格里的数据的效果。不过上面的代码都是传静态的值， 平时应用更多的是从一个时间控件或者input取值，那么就这样做

var table = $("#tableid").DataTable({
    ajax:{
        url:"data.action",
        type:"POST",
        data:{
            beginDate:$("#beginDate").val(),
            endDate:$("#endDate").val()
        }
    },
     columns:[
         {data:"name"},
         {data:"age"}
     ]
});
14.option ajax dataSrc （下） 对返回数据进行处理
http://datatables.club/manual/daily/2016/04/20/option-ajax-dataSrc2.html

接着昨天的dataSrc作为function时能处理什么复杂的情况呢？ 在这里可以把dataSrc和jQuery的ajax的success方法一起看，或者对于Datatables来说dataSrc是success的扩展、加强

$.ajax({
    url:"data.json",
    success:function(result){
        //result其实就是data.json的数据，那么当服务器返回的数据格式不是Datatables所支持的格式怎么办？这个时候就可以用到dataSrc来处理这个情况

    }
})

先假设data.json的数据格式如下：

{
    msg:"成功返回数据",
    listdata:{
        treeData:[
            {id:1,pid:0,name:"节点一"},
            {id:2,pid:1,name:"节点二"}
        ],
        tableData:{
            page:1,
            draw:1,
            size:58,
            filter_size:2,
            data:[
                {name:"中文网",age:2},
                {name:"datatables",age:3}
            ]
        }
    },
    status:true
}

相信很多小伙伴的数据格式比这个还要复杂，各种嵌套，各种包含，那么这里注意一点，认清Datatables所支持的格式（参考服务器模式），把这点弄明白，实际上就不难了，看下面代码，怎么使用上面所示格式的数据交给Datatables去处理

var table = $("#tableid").DataTable({
    ajax:{
        url:"data.json",
        dataSrc:function(result){
            //这里result和上面jquery的ajax的代码类似，也是可以得到data.json的数据，但是这样的格式，Datatables不能直接使用，这时候需要在这里处理一下

            //直接返回Datatables需要的那部分数据即可，看到这里，大家或许又懂了些什么看到了他的强大和灵活

            return result.listdata.tableData.data;
        }
    },
    columns:[
        {data:"name"},
        {data:"age"}
    ]
});

更新：2017年6月25日

对于使用服务器模式的小伙伴，参考如下代码：

var table = $("#tableid").DataTable({ serverSide:true, ajax:{ url:"data.action", dataSrc:function(result){ //这里除了把数据处理后返回给DataTables，还需要把另外三个参数处理为顶级的属性 result.draw = result.listdata.tableData.draw; result.recordsTotal = result.listdata.tableData.size; result.recordsFiltered = result.listdata.tableData.filter_size; //这里result和上面jquery的ajax的代码类似，也是可以得到data.json的数据，但是这样的格式，Datatables不能直接使用，这时候需要在这里处理一下 //直接返回Datatables需要的那部分数据即可，看到这里，大家或许又懂了些什么看到了他的强大和灵活 return result.listdata.tableData.data; } }, columns:[ {data:"name"}, {data:"age"} ] });

14 option ajax dataSrc （上） 改变默认的data属性取值

http://datatables.club/manual/daily/2016/04/19/option-ajax-dataSrc1.html

今天讲的参数dataSrc是属于ajax下的一个属性，他类似于jQuery ajax的success方法，废话少说看下面的代码 基本用法：

$("#tableid").DataTable({
    ajax:{
        url:"data.json",
        dataSrc:"tabledata"
    },
    columns:[
        {data:"name"},
        {data:"age"}
    ]
});

一般来说我们在定义一个接口的返回json数据格式（假设下面的数据为data.json的数据），会有msg（反馈信息），status（返回状态），data（返回数据）等等，具体看下面的数据格式

{
    msg:"查询成功",
    status:true,
    data:[
        {name:"datatables中文网",age:2},
        {name:"datatatble不定时一说",age:0}
    ]
}

对于上面的格式可能不太陌生，当然不是每一个人都会这么去做，那么数据格式的多样性就会让很多一开始接触Datatables的小伙伴无从下手，不知道怎么封装数据，或者和dt支持的数据格式不匹配，那么下面告诉大家dataSrc参数的用处，他可以接受一个字符串，也可以接受一个function。 作为字符串的时候： dataSrc:"tabledata" 这个tabledata是什么意思，下面看一段代码

$.ajax({
    url:"data.json",
    success:function(result){
        //在这个简单的ajax中，我们要使用返回的数据，直接就用result即可，那么我们要用上面数据中data的数据怎么办？

        //很简单，result.data 即可以取到我们要的数据，那么tabledata的意思就在这里

    }
})

如果我们的数据是如下格式，可以看到这里只是把【data】换成了【tabledata】，是不是稍微懂些了？

{
    msg:"查询成功",
    status:true,
    tabledata:[
        {name:"datatables中文网",age:2},
        {name:"datatatble不定时一说",age:0}
    ]
}

在返回去看最上面的那段代码，dataSrc:”tabledata” 这个的意思就是相当于dt自己封装了result.tabledata, 取到数据后循环生成tr和td， 只是dt默认的这个属性是data，但是平时项目中这个可能已经被定义了，没办法修改了，那么就在dt初始化的时候配置上，告诉dt我用的是那个属性

看完上面的说明，对dataSrc是否有一定的了解呢?当然这个可能还是无法满足实际的要求，那么就等明天介绍当他接受一个function的时候，怎么处理更复杂的情况

14 option ajax 异步取数

http://datatables.club/manual/daily/2016/04/18/option-ajax.html

今天讲的参数是ajax，相信大家不陌生，用过jQuery的人对这个应该很熟悉。dt是基于jquery做的表格插件，所以dt在读取数据时也用了jquery的ajax，虽然是类似，但是有加强，下面看ajax的用法吧。 基本语法：

$("#tableid").DataTable({
    ajax:"dada.json",
    columns:[
        {data:"name"},
        {data:"age"}
    ]
});

data.json - 是一个url或者资源文件，数据格式是这样的

{
    data:[
        {name:"DataTables中文网",age:2},
        {name:"DataTables中文网2",age:3}
    ]
}

你还可以使用数组格式，如下

{
    data:[
        ["DataTables中文网",2],["DataTables中文网2",3]
    ]
}

如果数据格式为上面的，那么初始化代码可以简化下：

$("#tableid").DataTable({
    ajax:"dada.json"
});

之所以能不写columns是因为dt默认可以处理数组格式的数据,按照数组的顺序0,1，2……对应第一列，第二列
posted @ 2019-03-27 13:42  elite_2012  阅读(197)  评论(0)  编辑  收藏  举报