Question

我试图在不使用ajax的情况下在子行上显示额外的信息，但事实是它运行良好，但我想以列表方式显示多个值。
Something like this

有什么建议吗？

我正在使用web2py来获取数据并填写表格，这是我的尝试：

<script>
            var tabla;
        $(document).ready(function(){
           tabla= $('#tablaGenerica').DataTable( {
            } );

        function format(value) {
              return '<div>Hidden Value: ' + value + '</div>';
          }

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

                  if (row.child.isShown()) {
                      // This row is already open - close it
                      row.child.hide();
                      tr.removeClass('shown');
                  } else {
                      // Open this row
                      row.child(format(tr.data('child-value'))).show();
                      tr.addClass('shown');
                  }
              });

</script>

<table id="tablaGenerica" class="tablaC table-striped hover cell-border" cellspacing="0" width="100%" >
        <thead>
            <tr>
                 <th></th>
                 <th class="select-filter">Name</th>
                 <th class="select-filter">Age</th>
                 <th class="select-filter">Country</th>
                 <th class="select-filter">Level</th>
            </tr>
        </thead>
            <tbody>
                   {{for person in formList:}}
                 <tr data-child-value="{{=person.Person.salary}}">
                   <td class="details-control"></td>
                   <td>{{=person.Person.name}}</td>
                   <td>{{=person.Person.age}}</td>
                   <td>{{=person.Person.country}}</td>
                   <td>{{=person.Person.level}}</td>
                </tr>
                {{pass}}
            </tbody>
</table>

Answer 1

有一个example为您

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}
 
$(document).ready(function() {
var data = [{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}];
    var table = $('#example').DataTable( {
        "data": data,
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ],
        "order": [[1, 'asc']]
    } );
     
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );

td.details-control {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

Answer 2

我建议稍微重构您的应用程序，因为您实际上并不需要做HTML服务器端的工作，因此DataTables可以在客户端为您处理这些事情。

您可以简单地准备对象数组，其中每个条目对应于表行，每个对象属性/内部数组元素-对应于相应的列（或详细信息条目）：

[
    {id: 1, name: 'Clark Kent', age: 32, country: 'USA', level: 'high'},
    {id: 2, name: 'Arthur Curry', age: 31, country: 'USA', level: 'medium'},
    {id: 3, name: 'Barry Allen', age: 24, country: 'USA', level: 'low'}
]

为了将那些对象属性/内部数组项链接到表列，可以使用DataTables选项columns或columnDefs：

$('#tablaGenerica').DataTable({
    ...
    columns: [
        {title: 'ID', data: 'id'},
        {title: 'Name', data: 'name'},
        ...
    ]
});

之后（这是答案的必要部分），为了在子行中显示多个详细信息，您只需要修改format()函数，以便它返回带有所有必要详细信息的子行的HTML标记：

const format = data => `
    <div>Age: ${data.age}</div>
    <div>Country: ${data.country}</div>
    <div>Level: ${data.level}</div>
`;

因此，您的案例的完整 DEMO 可能看起来像这样：

//specify source data
const dataSrc = [
    {id: 1, name: 'Clark Kent', age: 32, country: 'USA', level: 'high'},
    {id: 2, name: 'Arthur Curry', age: 31, country: 'USA', level: 'medium'},
    {id: 3, name: 'Barry Allen', age: 24, country: 'USA', level: 'low'}
];
//initialize DataTables
const dataTable = $('#tablaGenerica').DataTable({
  //specify necessary options to adjust DataTable to your needs
  dom: 't',
  data: dataSrc,
  //specify columns that should be visible initially
  columns: [
    {title: 'ID', data: 'id'},
    {title: 'Name', data: 'name'}
  ]
});
//declare function that renders child row with hidden details
const format = data => `
    <div>Age: ${data.age}</div>
    <div>Country: ${data.country}</div>
    <div>Level: ${data.level}</div>
`;
//attach event listener to row click
$('#tablaGenerica').on('click', 'tr', function(){
  //get clicked row into a variable
  const clickedRow = dataTable.row($(this));
  //show/hide child row
  clickedRow.child.isShown() ? clickedRow.child.hide() : clickedRow.child(format(clickedRow.data())).show();
  //toggle 'shown' class
  $(this).toggleClass('shown');
});

#tablaGenerica tbody tr.even:hover, #tablaGenerica tbody tr.odd:hover{
  cursor: pointer;
  background: lightgray;
}

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="tablaGenerica"></table>
</body>
</html>

数据表显示不带Ajax的子行的信息

2 个答案: