当数据表中没有数据（初始和搜索后）时如何显示自定义表行（<tr>）|数据表 | jQuery

Question

我在我的项目中使用数据表并使用 ajax 选项来获取数据表的数据，但我想在空表的情况下显示自定义表行，在之后没有记录的情况下显示不同的表行执行搜索。

$('#clients-list-table').DataTable({
    "processing": true,
    "lengthChange": false,
    "pageLength": 10,
    "ajax": {
        "url": SITE_URL + "/clients",
        "contentType": "application/json",
        "type": "GET"
    },
    "columns": [
        { "data": "name" },
        { "data": "email" },
        { "data": "tax_id", "searchable": false, "orderable": false },
        { "data": "phone", "searchable": false, "orderable": false },
        {
            "orderable":      false,
            "searchable":      false,
            "data":           null,
            "defaultContent": "",
            "mRender": function ( data, type, row ) {
                actionTd = '<i class="fa fa-sort-desc action-btn" class="dropdown-toggle" data-toggle="dropdown"></i>';
                actionTd += '<div class="dropdown-menu"><ul>';
                actionTd += '<li><a href="javascript:void(0);">View</a></li>';
                actionTd += '<li><a href="'+SITE_URL+'/clients/'+data.id+'/edit">Edit</a></li>';
                actionTd += '<li><a class="delete_resource" data-resource="destroy-client-form-'+data.id+'" href="'+SITE_URL+'/clients/'+data.id+'">Delete</a><form method="POST" action="'+SITE_URL+'/clients/'+data.id+'" accept-charset="UTF-8" id="destroy-client-form-'+data.id+'" style="display: none"><input name="_method" type="hidden" value="DELETE"><input name="_token" type="hidden" value="'+$('meta[name="csrf-token"]').attr('content')+'"></form></li>';
                actionTd += '</ul></div>';
                return actionTd;
            }
        },
    ],
    render: function ( data, type, row, meta ) {
        console.log(data.length);
    },
    rowCallback: function (row, data) {
        console.log(data);
    },
    "oLanguage": { 
        "sZeroRecords": '<div class="message"><p>You have not yet create a new client!</p></div><div class="invoice-btns"><a href="'+SITE_URL+'/clients/create" class="btn-custom"><i class="fa fa-plus" aria-hidden="true"></i> New Client </a></div>' 
    }
});

使用上述 sZeroRecords 选项显示下表行的当前 HTML

<tr class="odd">
    <td valign="top" colspan="5" class="dataTables_empty">
        <div class="message"><p>You have not yet create a new client!</p></div>
        <div class="invoice-btns"><a href="http://localhost/kedas/clients/create" class="btn-custom"><i class="fa fa-plus" aria-hidden="true"></i> New Client </a></div>
    </td>
</tr>

但我想在没有记录的情况下显示以下 HTML

<tr class="no-data-row">
    <td colspan="7" rowspan="2" align="center">
        <div class="message"><p>You have not yet create a new client!</p></div>
        <div class="invoice-btns">
            <a href="'+SITE_URL+'/clients/create" class="btn-custom"><i class="fa fa-plus" aria-hidden="true"></i> New Client </a>
        </div>
    </td>
</tr>

执行搜索后显示相同，但​​我想显示一些不同的表格行，如下所示

<tr class="no-search-data">
    <td colspan="7" rowspan="2" align="center">
        <div class="message"><p>There is no records match with your searchin</p></div>
    </td>
</tr>

Answer 1

其实你已经很接近了。看我的例子：

var jsonData = [
  { 
     "Name": "Tiger Nixon",
     "Position": "System Architect",
     "Office": "Edinburgh",
     "Age": 61,
     "StartDate": "2011/04/25",
     "Salary": "$320,800"
  },
  { 
     "Name": "Garrett Winters",
     "Position": "Accountant",
     "Office": "Tokyo",
     "Age": 63,
     "StartDate": "2011/07/25",
     "Salary": "$170,750"
  },
  { 
     "Name": "Ashton Cox",
     "Position": "Junior Technical Author",
     "Office": "San Francisco",
     "Age": 66,
     "StartDate": "2009/01/12",
     "Salary": "$86,000"
  }
];

var jsonData2 = []

var table = $('#example').DataTable({
  processing: true,
  lengthChange: false,
  pageLength: 10,
  language: {
     //zeroRecords: '<div class="fa-3x"><i class="fas fa-cog fa-spin"></i></div>',
     //emptyTable: '<div class="fa-3x"><i class="fas fa-spinner fa-spin"></i></div>'
     // zeroRecords: '<div class="message"><p>There is no records match with your searchin</p></div>'
  },
  data: jsonData2, // replace with jsonData for records
  drawCallback: function( settings ) {
    var api = this.api();
    var searchText = api.search();
    var currentPageDataSet = api.rows( {page:'current'} ).data();

    if (searchText != '' && currentPageDataSet.length == 0) {
        var $tbody = $('#example tbody');
        $tbody.empty();
        var $tr = $('<tr class="no-search-data" role="row"></tr>');  
        $tr.append('<td colspan="5" rowspan="2" align="center"><div class="message"><p>There is no records match with your searching</p></div></td>');
        $tbody.append($tr); 
    } else if (currentPageDataSet.length == 0) {
        var $tbody = $('#example tbody');
        $tbody.empty();
        var $tr = $('<tr role="row" class="no-data-row"></tr>');  
        $tr.append('<td colspan="5" rowspan="2" align="center"><div class="message"><p>You have not yet create a new supplier!</p></div><div class="invoice-btns"><a href="#" class="btn-custom"><i class="fa fa-plus" aria-hidden="true"></i> New Client </a></div></td>');
        $tbody.append($tr);
    }
  },
  columns: [
      { data: 'Name' },
      { data: 'Position' },
      { data: 'Office' },
      { data: 'Age' },
      { data: 'StartDate' },
      { data: 'Salary' }
    ]
});

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
</table>
<br><br>
<table id="example2" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
</table>