使用带有分页和排序的 ajax 将行动态添加到数据表
Posted
技术标签:
【中文标题】使用带有分页和排序的 ajax 将行动态添加到数据表【英文标题】：Dynamically adding rows to datatable using ajax with pagination and sorting 【发布时间】：2015-08-28 14:58:26 【问题描述】：我正在努力实现https://almsaeedstudio.com/themes/AdminLTE/pages/tables/data.html - “全功能数据表”
当我静态添加 tbody 时，分页和排序工作正常，但是当我使用如下所示的 jquery 添加 tbody 时，添加了行但分页和排序失败。
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/
更新代码
尽管响应中有数据，但更新后的代码不会填充表格。虽然我将 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");
);
回答
在下面回答的人的帮助下，下面的代码按预期工作。
<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>
【问题讨论】：
如何使用 AJAX 向 Datatables 添加多个数据数组？ 【参考方案1】：不要直接将行添加到表标记中，而是将其添加到 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();
这是一个演示https://jsfiddle.net/dhirajbodicherla/vwpsxhaL/1/
还从他们的文档中阅读how to add rows to DataTable 以供进一步参考
更新
你可以使用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
);
【讨论】：
谢谢，我更新了代码并在 ajax 调用中遇到了问题。你能看看并分享你的想法吗？ 你能分享一下 JSON 对象的样子吗？ response.d 将是 ["Id":"2F2203447334C31000000006","Name":"2F2203447334C31000000006","Description":"2F2203447334C31000000006","Parent":"","Image" :"","已验证":"否","状态":"","位置":"","X":"0","Y":"0","Z":"0", "IdClass":"User","Color":null,"Position":null ........ ] 你将使用对象的所有属性？ 不行，我不会全部使用，值为null的时候需要放一个空字符串。【参考方案2】：如果您使用 jQuery 修改表格 html，而不是插件提供的 api，则您必须再次调用该插件，以便根据修改后的 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'
);
);
演示 https://jsfiddle.net/8hyr08xb/
根据已编辑的问题进行更新
试试这个
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");
);
【讨论】：
谢谢，我更新了代码并在 ajax 调用中遇到了问题。你能看看并分享你的想法吗？ 因为它是一个 ajax 响应，所以我刚刚更新了这个问题。 response.d 将是 ["Id":"2F2203447334C31000000006","Name":"2F2203447334C31000000006","Description":"2F2203447334C31000000006","Parent":"","Image":"","Verified" :"no","State":"","L位置":"","X":"0","Y":"0","Z":"0","IdClass":" User","Color":null,"Position":null ........ ]。请让我知道这是否有帮助 我只看到标题 你能登录html数组看看里面有什么吗？
谢谢，我已经用工作代码更新了这个问题。再次感谢您。【参考方案3】：
相信我，如果不编写长行代码，上述所有操作都没有按预期工作
对我来说，解决方案非常简单快捷。 现在要让 Data Table 处理您的 Ajax 请求，您必须先调用请求，然后再使用 datatable 示例
请注意，在调用 ajax 之前，您不必先调用 DataTable，该表需要将数据输入到表体中
<tbody class="load-transactions"> and append using jquery for the rest
试试这个。稍后谢谢我。
【讨论】：
以上是关于使用带有分页和排序的 ajax 将行动态添加到数据表的主要内容，如果未能解决你的问题，请参考以下文章
如何在带有自定义过滤器的 Spring Data mongodb 中使用分页和排序？
使用具有 EnableCaching = true 的 ObjectDataSource 优化分页和排序