PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > Jquery教程 > 正文

    jQuery Datatable如何自定义列??

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:jQuery Datatable是一个很强大的表格工具,其实大家可以参考Datatable官方网站来查看具体的实例以及他对应的API。在此我们不去讲解如何实...
    jQuery Datatable是一个很强大的表格工具,其实大家可以参考Datatable官方网站来查看具体的实例以及他对应的API。在此我们不去讲解如何实现后端的分页、排序、查找,本文重点讲解如何对Datatable中的表格内容进行操作,包括改变他的样式、增加一列非数据列以及非数据列传递主键参数。

    首先,我们来定义我们的数据,本文就不去通过后端代码实现数据传递,就直接通过一个数据文件作为数据源。如下:


     
    复制代码 代码如下:
    {
      "data": [
        {
          "name": "Tiger Nixon",
          "position": "System Architect",
          "salary": "$320,800",
          "start_date": "2011/04/25",
          "office": "Edinburgh",
          "extn": "5421"
        },
        {
          "name": "Garrett Winters",
          "position": "Accountant",
          "salary": "$170,750",
          "start_date": "2011/07/25",
          "office": "Tokyo",
          "extn": "8422"
        },
        {
          "name": "Ashton Cox",
          "position": "Junior Technical Author",
          "salary": "$86,000",
          "start_date": "2009/01/12",
          "office": "San Francisco",
          "extn": "1562"
        }
        // ......
       ]
    }

    接下来,我们对我们的页面代码进行编写,至于表格样式如何编写,请参考官方提供的css,表格代码如下:
     
    复制代码 代码如下:
    <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Extn.</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>Operation</th> <!-- 这一列为自定义列 -->
                </tr>
            </thead>
                                                                                                                                                                                                                                          
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Extn.</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>Operation</th> <!-- 这一列为自定义列 -->
                </tr>
            </tfoot>
        </table>
    最后,我们重点来看JS如何编写。因为我们的数据源是用Object数组,因此我们需要去定义我们的datatable每一列对应的数据列名。为了增加一列以实现改变列样式,删除和修改操作链接我们需要对具体的列进行定义,这里用到datatable的columnDefs,代码如下:
     
    复制代码 代码如下:
    $(document).ready(function() {
            $('#example').dataTable({
                "ajax" : 'data.txt',
                "columns": [
                            { "data": "name", "visible": false},
                            { "data": "position" },
                            { "data": "office" },
                            { "data": "extn" },
                            { "data": "start_date" },
                            { "data": "salary" }
                        ],
                 "columnDefs": [
                      // 将Salary列变为红色
                      {
                          "targets": [5], // 目标列位置,下标从0开始
                          "data": "salary", // 数据列名
                          "render": function(data, type, full) { // 返回自定义内容
                              return "<span style='color:red;'>" + data + "</span>";
                          }
                      },
                      // 增加一列,包括删除和修改,同时将我们需要传递的数据传递到链接中
                      {
                          "targets": [6], // 目标列位置,下标从0开始
                          "data": "name", // 数据列名
                          "render": function(data, type, full) { // 返回自定义内容
                              return "<a href='/delete?name=" + data + "'>Delete</a>&nbsp;<a href='/update?name=" + data + "'>Update</a>";
                          }
                      }
                  ]
            });
        });
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-47-587-1.html
    相关热词搜索: Datatable jquery教程