點擊這里查看datatables官網介紹

點擊這里查看datatables中文網介紹

效果如下圖所示：

點擊首列調用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 显示行的附加信息的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。