【发布时间】：2021-09-23 03:57:01
【问题描述】：
我正在尝试解决一个问题，即我正在删除和更新数据表中的多行，但是当我在获得 ajax 成功后单击多个删除或多个更新按钮时，我的数据表布局发生了变化。我不明白为什么会这样。我无法找到任何解决方案。
ajax 多次删除
$.ajax({
type: 'POST',
url: "{{ route('website.multiple-deleterow') }}",
data: {ids: delid, '_token': "{{ csrf_token() }}"},
dataType: 'json',
success: function (data) {
if (data.success == true) {
console.log(data.data);
$('#webite_table_list').html(data.data);
myTable = $('#myTable').DataTable({
dom: 'Bfrtipl',
lengthMenu: [ [ 25, 50,100,500, -1], [25, 50,100,500,'All' ] ],
buttons: [
{
pageSize: 'LEGAL',
extend:'excel',
className: 'simple-export d-none',
title: 'Link Publisher',
orientation: 'landscape',
// action : newExportActionWebsite,
text:'<img src="{{asset('template_elsner/images/excel.svg')}}" /><b>Export</b>',
exportOptions: {
columns: [ 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
},
},{
className: 'export-all',
text:'<img src="{{asset('template_elsner/images/excel.svg')}}" /><b>Export</b>',
action: function () {
window.location.href = '{{ route("all.website.excel")}}';
$('.export-all').addClass('d-none');
$('.simple-export').removeClass('d-none');
}},
],
});
}
},
error: function (error) {
alert("Something went wrong please try again.");
}
});
} else {
alert("Please select atleast one checkbox");
}}
});
用于多个状态更新的 Ajax
$.ajax({
type: 'POST',
url: "{{ route('website.multiple-statusupdate') }}",
data: {ids: delid,selected_status: selected_status, '_token': "{{ csrf_token() }}"},
dataType: 'json',
success: function (data) {
if (data.success == true) {
console.log(data.data)
$('#webite_table_list').html(data.data);
myTable = $('#myTable').DataTable({
dom: 'Bfrtipl',
lengthMenu: [ [ 25, 50,100,500, -1], [25, 50,100,500,'All' ]],
buttons: [
{
pageSize: 'LEGAL',
extend:'excel',
className: 'simple-export d-none',
title: 'Link Publisher',
orientation: 'landscape',
// action : newExportActionWebsite,
text:'<img src="{{asset('template_elsner/images/excel.svg')}}" /><b>Export</b>',
exportOptions: {
columns: [ 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
},
},
{
className: 'export-all',
text:'<img src="{{asset('template_elsner/images/excel.svg')}}" /><b>Export</b>',
action: function ()
{
window.location.href = '{{ route("all.website.excel")}}';
$('.export-all').addClass('d-none');
$('.simple-export').removeClass('d-none');
}
},
],
});
}
},
error: function (error) {
alert("Something went wrong please try again.");
}
});
数据表
myTable = $('#myTable').DataTable({
dom: 'Bfrtipl',
lengthMenu: [ [ 25, 50,100,500, -1], [25, 50,100,500,'All' ] ],
buttons: [
{
pageSize: 'LEGAL',
extend:'excel',
className: 'simple-export d-none',
title: 'Link Publisher',
orientation: 'landscape',
// action : newExportActionWebsite,
text:'<img src="{{asset('template_elsner/images/excel.svg')}}" /><b>Export</b>',
exportOptions: {
columns: [ 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
},
},
{
className: 'export-all',
text:'<img src="{{asset('template_elsner/images/excel.svg')}}" /><b>Export</b>',
action: function ()
{
window.location.href = '{{ route("all.website.excel")}}';
$('.export-all').addClass('d-none');
$('.simple-export').removeClass('d-none');
}
},
],
// dom: 't',
"serverSide": true,
"responsive": true,
"bDestroy": true,
'ajax': {
'type': 'POST',
'url': '{{ route("websites.website_list") }}',
data: function (d) {
d.sort= sort;
d.start_date= start_date;
d.end= end;
d.user_id= userId;
}
},
"colReorder": true,
"order": [],
'columns': [
{ 'data': '', 'name': '', "defaultContent": ""},
{
data: null,
name: '',
render: data => {
return '<input class="ms-checkbox-wrap ms-checkbox-danger checkbox" type="checkbox" name="delid[]" value="'+data.id+'">';
}
},
{ 'data': 'username', 'name': 'username'},
{ 'data': 'website_url_value', 'name': 'website_url_value'},
{ 'data': 'da', 'name': 'da'},
{ 'data': 'traffic', 'name': 'traffic', "sType": "numeric"},
// { 'data': 'website_name', 'name': 'website_name' },
{ 'data': 'website_category', 'name': 'website_category' },
{ 'data': 'backlink_type', 'name': 'backlink_type' },
{ 'data': 'tat', 'name': 'tat'},
{ 'data': 'sample_post', 'name': 'sample_post' },
{ 'data': 'guidelines', 'name': 'guidelines' },
{ 'data': 'publishing_price', 'name': 'publishing_price'},
{ 'data': 'person', 'name': 'person'},
{ 'data': 'total_order', 'name': 'total_order' },
{ 'data': 'amt_receive', 'name': 'amt_receive' },
{ 'data': 'amt_paid', 'name': 'amt_paid' },
{ 'data': 'profilt', 'name': 'profilt' },
{ 'data': 'refund', 'name': 'refund' },
{ 'data': 'grade', 'name': 'grade' },
{ 'data': 'estimate_grade', 'name': 'estimate_grade' },
{ 'data': 'status_datatable', 'name': 'status_datatable', orderable: false, searchable: false },
{ 'data': 'tag_name','name':'tag_name'},
{ 'data': 'tag_email','name':'tag_email'},
{ 'data': 'linkinsertion_price', 'name': 'linkinsertion_price'},
{ 'data': 'action', 'name': 'action', orderable: false, searchable: false},
],
"columnDefs": [
{targets: [0], orderable: false, searchable: false},
{targets: [1], orderable: false, searchable: false},
{targets: [8], render: function(data){return data.replace("_", " ");}},
{targets: [11], render: function(data){return "$"+data;}},
{targets: [12], render: function(data){return data;}},
{targets: [14], render: function(data){if(data==null){ return 0; } else { return "$"+data;}}},
{targets: [15], render: function(data){if(data==null){ return 0; } else { return "$"+data;}}},
{targets: [16], render: function(data){if(data==0){ return 0; } else { return "$"+data;}}},
{targets: [17], render: function(data){if(data==0){ return 0; } else { return "$"+data;}}},
],
fixedColumns: true,
select: {
style: 'multi',
selector: 'td:nth-of-type(2)'
},
"initComplete": function()
{
var timer = 0;
$('.dataTables_filter input').unbind('.DT').bind('keyup.DT', function(e)
{
var value = this.value;
clearTimeout(timer);
timer = setTimeout(function() {
myTable.search(value).draw();
}, 1000);
return;
});
}
});
【问题讨论】：
-
更新后尝试 myTable.reload()
-
我试过了，但它不起作用。成功调用后再次获得更改后的布局
-
布局更改究竟意味着什么？是 css 问题还是其他问题？
-
我不认为这是 css 问题。最后两列被隐藏并转到子行。 ajax 成功后。
-
一旦您尝试从成功中删除所有数据表代码并尝试 myTable.reload()
标签： jquery ajax laravel datatable datatables