获得 ajax 成功后，数据表布局被更改
Posted
技术标签:
【中文标题】获得 ajax 成功后，数据表布局被更改【英文标题】：After getting ajax success datatable's layout gets changed 【发布时间】：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() 【参考方案1】：最后，我能够解决它。 实际上，问题是在 ajax 成功之前，URL 在没有域的情况下加载，成功之后，它显示了带有 https/http/www 的完整 URL，所以我删除了域和所有
<td>
<a href="$data->website_url" rel="noopener noreferrer nofollow" target="_blank" class="url_website order-anchor" id="website_$data->id">
<?php
$pattern = '/\w+\..2,3(?:\..2,3)?(?:$|(?=\/))/i';
$url = $data->website_url;
if (preg_match($pattern, $url, $matches) === 1)
?>
$matches[0]
<?php
?>
</a>
</td>
成功后列宽发生了变化，为了解决这个问题，我在ajax成功后也设置了列宽。
"columnDefs": [
width: 16,targets: [0], orderable: false, searchable: false,
width: 28,targets: [1], orderable: false, searchable: false,
width: 51, targets: [2],
width: 88, targets: [3],
width: 22, targets: [4],
width: 63, targets: [5],
width: 29,targets: [8], render: function(data)return data.replace("_", " ");,
width: 39,targets: [11], render: function(data)return "$"+data;,
width: 72,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;,
width: 130,targets: [20], orderable: false, searchable: false,
width: 66,targets: [24], orderable: false, searchable: false,
],
【讨论】：
以上是关于获得 ajax 成功后，数据表布局被更改的主要内容，如果未能解决你的问题，请参考以下文章