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

Question

I am using data tables in my project and using the ajax option to fetch the data for the data table but I want to show the custom table row in case of the empty table, and different table row in case of no records after perform searching.

$('#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>' 
    }
});

Current HTML showing the following table row by using the above sZeroRecords option

<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>

But I want to show the following HTML in case of no record

<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>

After perform Searching it showing the same but I want to show some different table row like below

<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

Actually you were pretty close. Look at my example:

 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>

Happy Coding!