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> <a href='/update?name=" + data + "'>Update</a>"; } } ] }); });
运行代码,效果图如下:
当我们去点击删除、更新链接时,都会发现我们传递进去的Name。注意:此处本实例将name列隐藏了,可以参考列定义中的配置。
由于公司需要使用该技术,因此在近期博主会对前台和后台进行一个抽象,届时会发布到本博客,请持续关注,谢谢。
附:jQuery Datatable Official Site: http://www.datatables.net
网页题目:jQueryDatatable自定义列
文章源于:https://www.cdcxhl.com/article16/gijjdg.html
成都网站建设公司_创新互联,为您提供网页设计公司、营销型网站建设、企业网站制作、Google、定制网站、标签优化
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联