您好我是新手,我正在使用 dataTable 来显示我的 mysql数据。所以我的数据显示正确,但我的dataTable
页脚没有工作正常。
这是我的代码
UI_CRUD.prototype.refreshTable = function(params = {}){
var tableBody = $('.view-datatable tbody');
var dataUrl = this.moduleURL+'/alenter code herel';
var title = this.moduleTitle;
// console.log(this.moduleTitle);
console.log('all ..');
$.ajax({
url: dataUrl,
data : params,
})
.done(function(data) {
var html = '';
$.each(data, function(index, item) {
html+= '<tr>';
$.each(item, function(index, data) {
(index != 'id') ? html+= '<td>'+data+'</td>' : html+='';
});
html+= '<td class="actions">' +
'<i class="icon-eye text-primary view-btn" data-id="'+item.id+'">'+
'</i>'+
'<span></span>'+
'<i class="icon-pencil7 text-primary edit-btn" data-id="'+item.id+'">' +
'</i>'+
'<span></span>'+
'<i class="icon-bin sweet_combine text-danger delete-btn" data-id="'+item.id+'">' +
'</i>'+
'</td>';
html+= '</tr>';
});
tableBody.html(html);
})
.fail(function(res) {
console.error(res,'UI_CRUD ERR : ');
});
}
这是刀片文件中的表格。
<table class="table view-datatable" id="mytable">
<thead>
<tr>
<th>Company Code </th>
<th>Company Name </th>
<th>Company Address </th>
<th>Telephone No. </th>
<th>Fax No. </th>
<th style="text-align: center;">Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
这是laravel控制器
public function getAll()
{
$company = $this->getCompanies();
return response()->json($company,200);
}
public function getCompanies()
{
$company = Company::select("id", "CO_COMCODE", "CO_NAME",
DB::raw("CONCAT(CO_ADD1, ',', CO_ADD2, ',', CO_ADD3, ',', CO_ADD4) AS Address"),
"CO_TELNO", "CO_FAXNO")
->get();
return $company;
}
这是响应json [{ “ID”:39, “CO_COMCODE”: “FFDE”, “CO_NAME”: “dsfsdf”, “地址”: “fsdfsd,fsdf,fdsf,FSD F”, “CO_TELNO”:“12345 6789 “ ”CO_FAXNO“: ”12 3456789“},{ ”ID“:41, ”CO_COMCODE“: ”AAAA“, ”CO_NAME“: ”fdfdsf“, ”A ddress“:” dsfdsf,DFDS女,dsffdsf,fdsfsd”, “C O_TELNO”: “123456789”, “CO_FAXNO”: “1234567 89”}]
这是我的输出页面
这是回复
答案 0 :(得分:2)
经过多方努力,我修正了错误
问题在于应用dataTable插件。删除该js文件并添加新的dataTable后。
<table class="table view-datatable">
<thead>
<tr>
<th>Company Code </th>
<th>Company Name </th>
<th>Company Address </th>
<th>Telephone No. </th>
<th>Fax No. </th>
</tr>
</thead>
<tbody></tbody>
var table = $('.view-datatable').DataTable( {
"processing" : true,
"retrieve": true,
"ajax" : {
"url" : ajax_url
},
"columns" : [ {
"data" : "CO_COMCODE"
}, {
"data" : "CO_NAME"
}, {
"data" : "Address"
}, {
"data" : "CO_TELNO"
}, {
"data" : "CO_FAXNO"
}, {
data: null,
className: "dataTable-center",
},],
"rowCallback": function( row, data, index ) {
$('td:eq(5)', row).html(
'<i class="icon-eye text-primary view-btn" data-id="'+data.id+'">'+
'</i>'+
'<span> </span>'+
'<i class="icon-pencil7 text-primary edit-btn" data-id="'+data.id+'">' +
'</i>'+
'<span> </span>'+
'<i class="icon-bin sweet_combine text-danger delete-btn" data-id="'+data.id+'">' +
'</i>'
);
},
"pagingType": "full_numbers",
buttons: {
buttons: [
{
extend: 'colvis',
className: 'btn btn-default'
},
{
text: 'Add New',
className: 'add-new btn bg-blue-800 ui-add-new',
action: function(e) {
// UI_addModel('show');
}
},
{extend: 'copy'},
// {extend: 'csv'},
{extend: 'excel'},
{extend: 'pdf'},
{extend: 'print'}
]
}
} );