销毁并重新创建 jQuery 个数据表
Destroy and recreate a jQuery Datatables
我有两个 jQuery 数据table 有服务器端处理。我有一个复选框,我可以在其中隐藏和显示两个 table。我想销毁显示的 none 并创建另一个 table。我该怎么做?
这是我尝试过的方法,但 ajax.reload
没有触发。
if ($('#mode').is(':checked')) {
Table2.ajax.reload();
Table1.clear();
Table1.destroy();
} else {
Table1.ajax.reload();
Table2.clear();
Table2.destroy()
}
var Table1 = $('#timesheet-table').DataTable({})
var Table2 = $('#timesheet-table-2').DataTable({})
据我所知,您永远不会在页面中显示 2 个数据表,所以为什么不只使用一个。
您可以初始化数据表并使用这样的序列
table.destroy();
$('#myTable').empty();
table = $('#myTable').DataTable( {
columns: json.columns,
data: json.rows
});
根据需要重新创建它。
您可以尝试一个简单的解决方法并重新加载页面,并在您检查页面加载的查询字符串中传递一个标志或其他内容,以告诉它您想要加载哪些数据table。
通过重新加载页面,您将重置 DOM 并实质上破坏之前加载的任何 table。
例如:
$(document).ready( function {
var flag = getUrlVars()["flag"];
if(flag != 1) {
Table2 = $('#timesheet-table-2').DataTable({})
} else {
Table1 = $('#timesheet-table').DataTable({})
}
}
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
你可以尝试这样的事情(这里有一个 fiddle 可能会有帮助):
function loadDataTable(type) {
$('#dataTableDiv').empty();
$('#dataTableDiv').append('<table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="example"> </table>');
var table1_columnList = [{
"data": "otherId",
"title": "Other ID"
}, {
"data": "firstName",
"title": "First Name"
}, {
"data": "lastName",
"title": "Last Name"
}, {
"data": "gender",
"title": "Gender"
}];
var table2_columnList = [{
"data": "id",
"title": "ID"
}, {
"data": "firstName",
"title": "First Name"
}, {
"data": "lastName",
"title": "Last Name"
}, {
"data": "gender",
"title": "Gender"
}, {
"data": "dob",
"title": "DOB"
}, {
"data": "race",
"title": "Race"
}];
var columnList = "";
if (type == 'table1')
columnList = table1_columnList;
else
columnList = table2_columnList;
myTable = $('#example').DataTable({
"sPaginationType": "full_numbers",
data: datavar,
columns: columnList,
responsive: true,
});
}
根据这个:https://datatables.net/reference/api/ajax.reload() ajax.reload() 它只是为了从远程流重新加载数据表的数据,而不是重新加载数据表本身
我认为你必须这样做:
if($('#mode').is(':checked')) {
Table2 = $('#timesheet-table-2').DataTable({})
Table1.clear();
Table1.destroy();
} else {
Table1 = $('#timesheet-table').DataTable({})
Table2.clear();
Table2.destroy()
}
var Table1 = $('#timesheet-table').DataTable({})
var Table2 = $('#timesheet-table-2').DataTable({})
您必须清除 div 内容才能正确销毁
if($('#mode').is(':checked')) {
Table2 = $('#timesheet-table-2').DataTable({})
Table1.clear();
Table1.destroy();
$('#timesheet-table').empty();
}
else {
Table1 = $('#timesheet-table').DataTable({})
Table2.clear();
Table2.destroy();
$('#timesheet-table-2').empty();
}
if ($('#mode').is(':checked')) {
Table2.ajax.reload();
Table1.clear();
Table1.destroy();
} else {
Table1.ajax.reload();
Table2.clear();
Table2.destroy()
}
var Table1 = $('#timesheet-table').DataTable({
ajax: "data.json";
})
var Table2 = $('#timesheet-table-2').DataTable({
ajax: "data.json";
})
您需要提供 ajax url 才能使用 table.ajax.reload()
方法
在我的例子中,要重置 table 我只是这样做:
$('#table_id').DataTable().clear().destroy();
$('#table_id').empty();
这样您就可以将 table 重置回初始状态,之后您可以重新初始化它。
我有两个 jQuery 数据table 有服务器端处理。我有一个复选框,我可以在其中隐藏和显示两个 table。我想销毁显示的 none 并创建另一个 table。我该怎么做?
这是我尝试过的方法,但 ajax.reload
没有触发。
if ($('#mode').is(':checked')) {
Table2.ajax.reload();
Table1.clear();
Table1.destroy();
} else {
Table1.ajax.reload();
Table2.clear();
Table2.destroy()
}
var Table1 = $('#timesheet-table').DataTable({})
var Table2 = $('#timesheet-table-2').DataTable({})
据我所知,您永远不会在页面中显示 2 个数据表,所以为什么不只使用一个。 您可以初始化数据表并使用这样的序列
table.destroy();
$('#myTable').empty();
table = $('#myTable').DataTable( {
columns: json.columns,
data: json.rows
});
根据需要重新创建它。
您可以尝试一个简单的解决方法并重新加载页面,并在您检查页面加载的查询字符串中传递一个标志或其他内容,以告诉它您想要加载哪些数据table。
通过重新加载页面,您将重置 DOM 并实质上破坏之前加载的任何 table。
例如:
$(document).ready( function {
var flag = getUrlVars()["flag"];
if(flag != 1) {
Table2 = $('#timesheet-table-2').DataTable({})
} else {
Table1 = $('#timesheet-table').DataTable({})
}
}
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
你可以尝试这样的事情(这里有一个 fiddle 可能会有帮助):
function loadDataTable(type) {
$('#dataTableDiv').empty();
$('#dataTableDiv').append('<table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="example"> </table>');
var table1_columnList = [{
"data": "otherId",
"title": "Other ID"
}, {
"data": "firstName",
"title": "First Name"
}, {
"data": "lastName",
"title": "Last Name"
}, {
"data": "gender",
"title": "Gender"
}];
var table2_columnList = [{
"data": "id",
"title": "ID"
}, {
"data": "firstName",
"title": "First Name"
}, {
"data": "lastName",
"title": "Last Name"
}, {
"data": "gender",
"title": "Gender"
}, {
"data": "dob",
"title": "DOB"
}, {
"data": "race",
"title": "Race"
}];
var columnList = "";
if (type == 'table1')
columnList = table1_columnList;
else
columnList = table2_columnList;
myTable = $('#example').DataTable({
"sPaginationType": "full_numbers",
data: datavar,
columns: columnList,
responsive: true,
});
}
根据这个:https://datatables.net/reference/api/ajax.reload() ajax.reload() 它只是为了从远程流重新加载数据表的数据,而不是重新加载数据表本身
我认为你必须这样做:
if($('#mode').is(':checked')) {
Table2 = $('#timesheet-table-2').DataTable({})
Table1.clear();
Table1.destroy();
} else {
Table1 = $('#timesheet-table').DataTable({})
Table2.clear();
Table2.destroy()
}
var Table1 = $('#timesheet-table').DataTable({})
var Table2 = $('#timesheet-table-2').DataTable({})
您必须清除 div 内容才能正确销毁
if($('#mode').is(':checked')) {
Table2 = $('#timesheet-table-2').DataTable({})
Table1.clear();
Table1.destroy();
$('#timesheet-table').empty();
}
else {
Table1 = $('#timesheet-table').DataTable({})
Table2.clear();
Table2.destroy();
$('#timesheet-table-2').empty();
}
if ($('#mode').is(':checked')) {
Table2.ajax.reload();
Table1.clear();
Table1.destroy();
} else {
Table1.ajax.reload();
Table2.clear();
Table2.destroy()
}
var Table1 = $('#timesheet-table').DataTable({
ajax: "data.json";
})
var Table2 = $('#timesheet-table-2').DataTable({
ajax: "data.json";
})
您需要提供 ajax url 才能使用 table.ajax.reload()
方法
在我的例子中,要重置 table 我只是这样做:
$('#table_id').DataTable().clear().destroy();
$('#table_id').empty();
这样您就可以将 table 重置回初始状态,之后您可以重新初始化它。