jQuery 使用带有分页和排序的 ajax 将行动态添加到数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30805784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically adding rows to datatable using ajax with pagination and sorting
提问by Gopi
I am trying to achieve https://almsaeedstudio.com/themes/AdminLTE/pages/tables/data.html- "Data Table With Full Features"
我正在尝试实现https://almsaeedstudio.com/themes/AdminLTE/pages/tables/data.html- “具有完整功能的数据表”
When I added tbody statically, pagination and sorting works fine but when I add tbody using jquery as given below, rows are added but pagination and sorting fails.
当我静态添加 tbody 时，分页和排序工作正常，但是当我使用 jquery 添加 tbody 时，如下所示，添加了行但分页和排序失败。
HTML
HTML
<table id="tblItems">
<thead>
<tr>
<th>code</th>
<th>Name</th>
<th>Description</th>
<th>Image</th>
<th>Parent</th>
<th>Location</th>
<th>Category</th>
</tr>
</thead>
</table>
jquery
查询
$(document).ready(function() {
$('#tblItems').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
$('#tblItems').append('<tbody><tr><td>asdsa34id</td><td> asdsa34id </td><td>asdsa34id </td><td> asdsa34id</td><td>asdsa34id</td><td>asdsa34id</td><td>asdsa34id</td></tr></tbody>');
});
https://jsfiddle.net/techjerk2013/vwpsxhaL/
https://jsfiddle.net/techjerk2013/vwpsxhaL/
Updated Code
更新代码
The updated code doesn't populate the table though there are data from the response. Though I set the deferRender to true, still the datatable is empty.
尽管有来自响应的数据，但更新后的代码不会填充表。虽然我将 deferRender 设置为 true，但数据表仍然是空的。
$(document).ready(function() {
PopulateItemsTable();
BindTable();
});
function BindTable() {
$("#tblItems").DataTable({
"deferRender": true,
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
}
function PopulateItemsTable() {
var txt = "";
$.ajax({
type: "POST",
url: "Item.aspx/Search",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var jsonObject = JSON.parse(response.d);
if (jsonObject) {
var len = jsonObject.length;
if (len > 0) {
for (var i = 0; i < len; i++) {
if (jsonObject[i].Id) {
Id = jsonObject[i].Id;
}
else {
Id = '';
}
if (jsonObject[i].Name) {
Name = jsonObject[i].Name;
}
else {
Name = '';
}
if (jsonObject[i].Description) {
Description = jsonObject[i].Description;
}
else {
Description = '';
}
if (jsonObject[i].Image) {
Image = jsonObject[i].Image;
}
else {
Image = '';
}
if (jsonObject[i].Parent) {
Parent = jsonObject[i].Parent;
}
else {
Parent = '';
}
if (jsonObject[i].Location) {
Location = jsonObject[i].Location;
}
else {
Location = '';
}
Category = '';
txt += "<tr><td>" + Id + "</td><td>" + Name + "</td><td>" + Description + "</td><td>" + Image + "</td><td>" + Parent + "</td><td>" + Location + "</td><td>" + Category + "</td></tr>";
$('#tblItems').append('<tbody>' + txt + '</tbody>');
}
}
else {
$("#tblItems").append("No records found");
}
}
},
failure: function () {
$("#tblItems").append(" Error when fetching data please contact administrator");
}
});
}
Answer
回答
With the help of people answered below, the code below works as expected.
在下面回答的人的帮助下，下面的代码按预期工作。
<script type="text/javascript">
var myTable;
$(document).ready(function () {
BindItemTable();
PopulateItemsTable();
});
function BindItemTable() {
myTable = $("#tblItems").DataTable({
"deferRender": true,
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
}
function PopulateItemsTable() {
$.ajax({
type: "POST",
url: "ItemManagement.aspx/SearchIdList",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var jsonObject = JSON.parse(response.d);
var result = jsonObject.map(function (item) {
var result = [];
result.push(item.Id);
result.push(item.Name);
result.push(item.Description);
result.push(item.Image);
result.push(item.Parent);
result.push(item.Location);
result.push("");
return result;
});
myTable.rows.add(result);
myTable.draw();
},
failure: function () {
$("#tblItems").append(" Error when fetching data please contact administrator");
}
});
}
</script>
回答by Dhiraj
Do not add the row to the table markup directly, instead add it to DataTable instance and then use the .draw()method. Adding to the DataTable instance will internally add it as a tbodyanyway. Something like this should do
不要将行直接添加到表标记中，而是将其添加到 DataTable 实例中，然后使用该.draw()方法。添加到 DataTable 实例将在内部将其添加为tbody无论如何。这样的事情应该做
var mytable = $('#tblItems').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
mytable.row.add(['asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id', 'asdsa34id']);
mytable.draw();
Here is a demo https://jsfiddle.net/dhirajbodicherla/vwpsxhaL/1/
这是一个演示https://jsfiddle.net/dhirajbodicherla/vwpsxhaL/1/
Also reading how to add rows to DataTablefrom their documentation for further reference
另请阅读如何从他们的文档中向 DataTable 添加行以供进一步参考
Update
更新
You can use rows.add()(plural) and do something like this
你可以使用rows.add()（复数）并做这样的事情
var jsonObject = JSON.parse(response.d);
var result = jsonObject.map(function(item){
var result = [];
result.push(item.Id);
// .... add all the values required
return result;
});
myTable.rows.add(result); // add to DataTable instance
myTable.draw(); // always redraw
var myTable;
$(document).ready(function() {
myTable = $("#tblItems").DataTable({
"deferRender": true,
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
PopulateItemsTable();
});
function PopulateItemsTable() {
$.ajax({
type: "POST",
url: "Item.aspx/Search",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var jsonObject = JSON.parse(response.d);
var result = jsonObject.map(function(item){
var result = [];
result.push(item.Id);
// .... add all the values required
return result;
});
myTable.rows.add(result); // add to DataTable instance
myTable.draw(); // always redraw
}
});
}
回答by ShankarSangoli
If you are modifying the table html using jQuery but not the apis provided by plugin then you have to call the plugin again so that it will reinstantiate as per the modified html.
如果您正在使用 jQuery 而不是插件提供的 apis 修改表格 html，那么您必须再次调用该插件，以便它根据修改后的 html 重新实例化。
$(document).ready(function() {
$('#tblItems').append('<tbody><tr><td>asdsa34id</td><td> asdsa34id </td><td>asdsa34id </td><td> asdsa34id</td><td>asdsa34id</td><td>asdsa34id</td><td>asdsa34id</td></tr></tbody>');
$('#tblItems').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
});
Demohttps://jsfiddle.net/8hyr08xb/
演示https://jsfiddle.net/8hyr08xb/
Update based on the edited question
根据编辑过的问题进行更新
Try this
尝试这个
function PopulateItemsTable() {
var txt = "";
$.ajax({
type: "POST",
url: "Item.aspx/Search",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var jsonObject = JSON.parse(response.d), html = [];
if (jsonObject) {
var len = jsonObject.length;
if (len > 0) {
for (var i = 0; i < len; i++) {
if (jsonObject[i].Id) {
Id = jsonObject[i].Id;
}
else {
Id = '';
}
if (jsonObject[i].Name) {
Name = jsonObject[i].Name;
}
else {
Name = '';
}
if (jsonObject[i].Description) {
Description = jsonObject[i].Description;
}
else {
Description = '';
}
if (jsonObject[i].Image) {
Image = jsonObject[i].Image;
}
else {
Image = '';
}
if (jsonObject[i].Parent) {
Parent = jsonObject[i].Parent;
}
else {
Parent = '';
}
if (jsonObject[i].Location) {
Location = jsonObject[i].Location;
}
else {
Location = '';
}
Category = '';
html.push("<tr><td>" + Id + "</td><td>" + Name + "</td><td>" + Description + "</td><td>" + Image + "</td><td>" + Parent + "</td><td>" + Location + "</td><td>" + Category + "</td></tr>");
}
$('#tblItems')
.append('<tbody>' + html.join('') + '</tbody>')
.DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
}
else {
$("#tblItems").append("No records found");
}
}
},
failure: function () {
$("#tblItems").append(" Error when fetching data please contact administrator");
}
});
}
回答by Delino
Trust me, i did all the above none ever works as expected without writing long lines of code
相信我，我做了上面所有的事情，没有写长行代码就没有按预期工作
The solution for me was pretty simple and quick. Now to get Data Table to work with your Ajax request you have to call the request first before engaging datatable Example
对我来说，解决方案非常简单快捷。现在要让数据表处理您的 Ajax 请求，您必须在使用数据表示例之前先调用该请求
Note you don't have to call DataTable first before calling your ajax, The table needs data to be fed into the table body
请注意，在调用 ajax 之前不必先调用 DataTable，该表需要将数据输入到表体中
<tbody class="load-transactions"> and append using jquery for the rest
Just try this. Thank me later.
试试这个。晚点再谢我。
