Question

是否可以通过Ajax获取每一行的详细信息？我在这里找到了一个起点： http://datatables.net/release-datatables/examples/api/row_details.html 但它不使用ajax。我正在考虑修改fnFormatDetails（）函数并在那里放置ajax调用。但我正在寻找另一个更好的答案。

感谢。

Answer 1

这非常简单。您所要做的就是将您的详细信息放在＆＃34;数据中的单独字段中。阵列：

E.g。您的JSON可能如下所示：

{
    "draw": "${drawId}",
    "recordsTotal": "${totalRecords}",
    "recordsFiltered": "${filteredRecords}",
    "data": [
       {            
          "empName": "${employee.name}",
          "empNumber": "${employee.number}",
          "empEmail": "${employee.email}",
          "extraDetails" : [
             ["${employee.salary}", "${employee.title}"]    
          ]
       }
    ]
}

然后在您的javascript中，您可以使用JavaScript数组简单地访问这些额外的细节。 E.g。

var row = employeeTable.row( tr );
var rowData = row.data();
alert(rowData.extraDetails[0][0]);
alert(rowData.extraDetails[0][1]);

Answer 2

如果您的行中有数据，则无需使用ajax。

尝试oTable.fnGetData（rowIndexor | trNode）

Answer 3

您可以尝试一下，它将起作用。

首先：创建数据表。

var table = $('#myTable').DataTable( {
    ajax: '/api/staff',
    columns: [
     {
        className:      'details-control',
        orderable:      false,
        data:           null,
        defaultContent: ''
     },
     { data: "name" },
     { data: "position" },
     { data: "office" },
     { data: "salary" }
 ],
 order: [[1, 'asc']]  } );

第二：事件处理程序

$('#myTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );

if ( row.child.isShown() ) {
    row.child.hide();
    tr.removeClass('shown');
}
else {
    row.child( format(row.data()) ).show();
    tr.addClass('shown');
} } );

第三：Ajax请求和格式化响应

function format ( rowData ) {
var div = $('<div/>')
    .addClass( 'loading' )
    .text( 'Loading...' );

$.ajax( {
    url: '/api/staff/details',
    data: {
        name: rowData.name
    },
    dataType: 'json',
    success: function ( json ) {
        div
            .html( json.html )
            .removeClass( 'loading' );
    }
} );

return div; }

您可以将任何行参数传递给format方法。

检查This了解详情

Jquery Datatables通过Ajax扩展行并获取详细信息

3 个答案: