效果如下图所示：

点击首列调用ajax返回数据，并展开明细行如下图所示：

CSS代码：

td.details-control {background: url('../../scripts/datatables-1.10.19/images/details_open.png')  no-repeat center center;cursor: pointer;}tr.details td.details-control {background: url('../../scripts/datatables-1.10.19/images/details_close.png') no-repeat center center;}

HTML代码：

<table id="example" class="table table-striped table-over table-bordered" style="white-space: nowrap;width:100%;cursor:pointer" cellspacing="0"></table>

JS代码：

<script type="text/javascript">var dtsLanguage = "/Scripts/datatables-zh-cn/datatables_zh-cn.txt";var table;var url = "/Home/GetData";var detailRows = [];//用来记录显示明细行id的数组$(document).ready(function () {table = $('#example').DataTable({ajax: {url: url,type: "Get",dataType: "json",data: {},dataSrc: function (json) {return json;},error: function () {alert("服务器未正常响应，请重试");}},dom: 'Bfrtip',buttons:[{extend: 'pageLength',className: 'btn btn-primary',},],columns: [{className: 'details-control',orderable: false,data: null,defaultContent: '',                                     },{ title: "Name", data: "Name"},{ title: "Position", data: "Position"},{ title: "Office", data: "Office"},],language: {url: dtsLanguage}});// 每次重绘,循环details数组显示所有子行table.on('draw', function () {$.each(detailRows, function (i, id) {$('#' + id + ' td.details-control').trigger('click');});});$('#example tbody').on('click', 'tr td.details-control', function () {var tr = $(this).closest('tr');var row = table.row(tr);var idx = $.inArray(tr.attr('id'), detailRows);if (row.child.isShown()) {tr.removeClass('details');row.child.hide();//从数组中移除detailRows.splice(idx, 1);}else {tr.addClass('details');row.child(format(row.data())).show();//增加到数组if (idx === -1) {detailRows.push(tr.attr('id'));}}});});function format(rowData) {var html;$.ajax({url: '/Home/Details',data: {name: rowData.Name},async: false,type: 'post',dataType: 'json',success: function (json) {var data = json.data[0];html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +'<tr>' +'<td>Age:</td>' +'<td>' + data.Age + '</td>' +'</tr>' +'<tr>' +'<td>Salary:</td>' +'<td>' + data.Salary + '</td>' +'</tr>' +'<tr>' +'<td>Extra info:</td>' +'<td>And any further details here (images etc)...</td>' +'</tr>' +'</table>';}});return html;}</script>

JQuery Datatables 显示行的附加信息相关推荐

JQuery Datatables editor 行内编辑功能
背景 ERP软件中,能进行行内编辑的表单是常用功能,行内编辑功能能让用户在表格中自己填写.修改.删除数据或者选择数据,可以说表格控件是ERP软件的核心控件,而行内编辑功能是核心中的关键. 本文会继续接 ...
JQuery DataTables改变行或列的背景或字体颜色
var table;table = $('#example').DataTable({dom: 'Bfrtip',scrollY: true,scrollX: true,scrollCollapse: ...
js ajax获得对象怎么放到td上,jquery通过AJAX从后台获取信息并显示在表格上，并支持行选中...
不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...
jquery Datatables 行数据删除、行上升、行下降功能演示
Datatables 是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 官方网站:http://www.datatables.net Datatables ...
vim快速定位到某一行显示行号定位匹配字符串显示当前行信息的命令
快速定位到指定行 vim打开文件默认光标会停留在文件开头,当文件行数比较多的时候很难快速找到行数进行修改,以下几种方法可以帮你快速定位到指定行. 1.命令模式下(没有输入i进行编辑前),:n 比如想到 ...
php读取部分文章显示不出来了,织梦使用PHP5.3环境时遇到部分文章出现”读取附加信息出错“的解决办法jz1...
昨天无忧主机小编一同事为客户做迁移,没注意到客户所在空间服务器环境是php5.3的,搬家成功后恢复数据,用IP地址访问网站时一切正常!这是能访问正常,是因为DEDECMS程序自身生成的html页面导致 ...
设置Ubuntu 的vim/vi 自动显示行号信息
目录 1.临时显示行号: 2.初始化设置默认显示行号 1.临时显示行号: 在打开vim编辑器输入": set number "或者":set nu " 即可显示 ...
jQuery dataTables 的使用
2019独角兽企业重金招聘Python工程师标准>>> jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等 ...
jQuery - （JQuery datatables api 使用解读）
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

JQuery Datatables 显示行的附加信息

效果如下图所示：

JQuery Datatables 显示行的附加信息相关推荐

最新文章

热门文章