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

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;            }        },    ],   

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>