我在我的项目中使用数据表并使用 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>
其实你已经很接近了。看我的例子:
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>
快乐编码!
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句