数据表中没有数据（初始和搜索后）时如何显示自定义表行（<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 = [&nbsp; {&nbsp;&nbsp; &nbsp; &nbsp;"Name": "Tiger Nixon",&nbsp; &nbsp; &nbsp;"Position": "System Architect",&nbsp; &nbsp; &nbsp;"Office": "Edinburgh",&nbsp; &nbsp; &nbsp;"Age": 61,&nbsp; &nbsp; &nbsp;"StartDate": "2011/04/25",&nbsp; &nbsp; &nbsp;"Salary": "$320,800"&nbsp; },&nbsp; {&nbsp;&nbsp; &nbsp; &nbsp;"Name": "Garrett Winters",&nbsp; &nbsp; &nbsp;"Position": "Accountant",&nbsp; &nbsp; &nbsp;"Office": "Tokyo",&nbsp; &nbsp; &nbsp;"Age": 63,&nbsp; &nbsp; &nbsp;"StartDate": "2011/07/25",&nbsp; &nbsp; &nbsp;"Salary": "$170,750"&nbsp; },&nbsp; {&nbsp;&nbsp; &nbsp; &nbsp;"Name": "Ashton Cox",&nbsp; &nbsp; &nbsp;"Position": "Junior Technical Author",&nbsp; &nbsp; &nbsp;"Office": "San Francisco",&nbsp; &nbsp; &nbsp;"Age": 66,&nbsp; &nbsp; &nbsp;"StartDate": "2009/01/12",&nbsp; &nbsp; &nbsp;"Salary": "$86,000"&nbsp; }];var jsonData2 = []var table = $('#example').DataTable({&nbsp; processing: true,&nbsp; lengthChange: false,&nbsp; pageLength: 10,&nbsp; language: {&nbsp; &nbsp; &nbsp;//zeroRecords: '<div class="fa-3x"><i class="fas fa-cog fa-spin"></i></div>',&nbsp; &nbsp; &nbsp;//emptyTable: '<div class="fa-3x"><i class="fas fa-spinner fa-spin"></i></div>'&nbsp; &nbsp; &nbsp;// zeroRecords: '<div class="message"><p>There is no records match with your searchin</p></div>'&nbsp; },&nbsp; data: jsonData2, // replace with jsonData for records&nbsp; drawCallback: function( settings ) {&nbsp; &nbsp; var api = this.api();&nbsp; &nbsp; var searchText = api.search();&nbsp; &nbsp; var currentPageDataSet = api.rows( {page:'current'} ).data();&nbsp; &nbsp; if (searchText != '' && currentPageDataSet.length == 0) {&nbsp; &nbsp; &nbsp; &nbsp; var $tbody = $('#example tbody');&nbsp; &nbsp; &nbsp; &nbsp; $tbody.empty();&nbsp; &nbsp; &nbsp; &nbsp; var $tr = $('<tr class="no-search-data" role="row"></tr>');&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $tr.append('<td colspan="5" rowspan="2" align="center"><div class="message"><p>There is no records match with your searching</p></div></td>');&nbsp; &nbsp; &nbsp; &nbsp; $tbody.append($tr);&nbsp;&nbsp; &nbsp; } else if (currentPageDataSet.length == 0) {&nbsp; &nbsp; &nbsp; &nbsp; var $tbody = $('#example tbody');&nbsp; &nbsp; &nbsp; &nbsp; $tbody.empty();&nbsp; &nbsp; &nbsp; &nbsp; var $tr = $('<tr role="row" class="no-data-row"></tr>');&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $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>');&nbsp; &nbsp; &nbsp; &nbsp; $tbody.append($tr);&nbsp; &nbsp; }&nbsp; },&nbsp; columns: [&nbsp; &nbsp; &nbsp; { data: 'Name' },&nbsp; &nbsp; &nbsp; { data: 'Position' },&nbsp; &nbsp; &nbsp; { data: 'Office' },&nbsp; &nbsp; &nbsp; { data: 'Age' },&nbsp; &nbsp; &nbsp; { data: 'StartDate' },&nbsp; &nbsp; &nbsp; { data: 'Salary' }&nbsp; &nbsp; ]});<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%">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; &nbsp; <th>Position</th>&nbsp; &nbsp; &nbsp; <th>Office</th>&nbsp; &nbsp; &nbsp; <th>Age</th>&nbsp; &nbsp; &nbsp; <th>Start date</th>&nbsp; &nbsp; &nbsp; <th>Salary</th>&nbsp; &nbsp; </tr>&nbsp; </thead></table><br><br><table id="example2" class="display" style="width:100%">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; &nbsp; <th>Position</th>&nbsp; &nbsp; &nbsp; <th>Office</th>&nbsp; &nbsp; &nbsp; <th>Age</th>&nbsp; &nbsp; &nbsp; <th>Start date</th>&nbsp; &nbsp; &nbsp; <th>Salary</th>&nbsp; &nbsp; </tr>&nbsp; </thead></table>