jQuery Datatable 自定义列

发布时间:2020-05-24 12:29:46 作者:sgyyz
来源:网络 阅读:10952

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>";
                      }
                  }
              ]
        });
    });


运行代码,效果图如下:

jQuery Datatable 自定义列

当我们去点击删除、更新链接时,都会发现我们传递进去的Name。注意:此处本实例将name列隐藏了,可以参考列定义中的配置。


由于公司需要使用该技术,因此在近期博主会对前台和后台进行一个抽象,届时会发布到本博客,请持续关注,谢谢。

附:jQuery Datatable Official Site: http://www.datatables.net

推荐阅读:
  1. jQuery Datatable 实用简单实例
  2. 我的jQuery动态表格插件

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery datatable dat ue

上一篇:开学先导思维:IT事业者应清醒意识到计算机系统在宇宙人生中的本质作用和意义

下一篇:CentOS6.5安装phpmyadmin

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》