数据表可编辑删除
我已将 DataTables Editable 添加到我的表中，以便能够添加和删除一些行。 添加部分效果很好，但我在删除部分遇到一些问题，因为我无法选择行。
根据我在示例中看到的，我所要做的就是添加删除 URL，如下所示：
.makeEditable({sDeleteURL: "/DeleteURL"});
但这并不会使我的行变得可选择，这样我就可以删除任何内容。
我的完整代码是：
$(function () {
var oTable = $('[email protected]').dataTable(
{
"oLanguage": { "sUrl": "/LanguageURL" },
"bProcessing": true,
"bFilter": false,
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"bLengthChange": false,
"aoColumnDefs": [{ "sClass": "center-col", "aTargets": ['align-center-col'] },
{ "sClass": "read_only", "aTargets": ['read-only-col'] },
{ "sClass": "small-width-col", "aTargets": ['small-col'] }],
"aaSorting": [[0, "desc"]],
"bScrollCollapse": true,
"bServerSide": true,
"sAjaxSource": '/DataURL',
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ "name": "Numero", "value": $(this).find("#Numero").val() });
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
}).makeEditable({
sAddNewRowFormId: '[email protected]',
sAddNewRowButtonId: '[email protected]',
btnDeleteRow: '[email protected]',
sAddURL: "/AddURL",
sDeleteURL: "/DeleteURL"
});
});
I've add DataTables Editable to my table to able to add and delete some rows.
The add part works great, but I'm having some problem with the delete part, because I can't select the rows.
By what I've seen in the example all I've to do is to add the delete URL, something like this:
.makeEditable({sDeleteURL: "/DeleteURL"});
But that dosent make my rows selectable so I can delete anthing.
My full code is:
$(function () {
var oTable = $('[email protected]').dataTable(
{
"oLanguage": { "sUrl": "/LanguageURL" },
"bProcessing": true,
"bFilter": false,
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"bLengthChange": false,
"aoColumnDefs": [{ "sClass": "center-col", "aTargets": ['align-center-col'] },
{ "sClass": "read_only", "aTargets": ['read-only-col'] },
{ "sClass": "small-width-col", "aTargets": ['small-col'] }],
"aaSorting": [[0, "desc"]],
"bScrollCollapse": true,
"bServerSide": true,
"sAjaxSource": '/DataURL',
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ "name": "Numero", "value": $(this).find("#Numero").val() });
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
}).makeEditable({
sAddNewRowFormId: '[email protected]',
sAddNewRowButtonId: '[email protected]',
btnDeleteRow: '[email protected]',
sAddURL: "/AddURL",
sDeleteURL: "/DeleteURL"
});
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我个人一直在尝试让数据表删除功能适用于我的一个项目。
我发现我需要在文档的头部包含
jquery-ui.js脚本。我还发现您需要像这样设置表格行的格式。
以便数据表可以自动从所选行中获取正确的 id # 并将其传递到您的 php 页面以进行进一步处理。Datatables 可以通过使用 DT_RowId 特殊属性自动向每个表行添加 id。
如果您已将数据表设置为使用服务器端实现，则可以在服务器返回的 JSON 数据中包含 DT_RowId 来响应 ajax 请求。
例如 JSON 格式：
这是我的示例模型代码。此示例中不包含服务器端实现，我只是使用数据表附带的示例源objects.txt 作为示例。
注意您可能需要将脚本和样式 URL 路径更改为您所在的位置才能查看工作示例。
更新：您还需要手动将其包含在 HTML 源代码中的任何位置。
I've personally been playing around with getting the datatables delete function to work for one of my projects.
What I've found is I needed to include the
jquery-ui.jsscript in the head of the document.I also discovered that you need to format your table rows like this.
<tr id="1">so that datatables can automatically grab the correct id # from the selected row and pass it on to your php page for further processing.Datatables can automatically add an id to each table row through the use of
DT_RowIdspecial property.If you have set up datatables to use server side implementation, then you can include
DT_RowIdin the JSON data returned from the server in response to the ajax request .For example JSON format:
Here is my example mockup code. Server side implementation isn't included with this example I'm just using the example source objects.txt that came with datatables for an example.
NOTE You may have to change the script and Style URL paths to where yours are located in order to see a working example.
Update: You also need to manually include this anywhere in your HTML source.