Jquery 正在尝试将Ajax请求添加到Datatable
我正在尝试向我的表中添加一些功能,允许用户选择一行或多行,以便在用户单击delete按钮后,它将向服务器发送Ajax请求,从表中删除项目。我一直在看datatables网站,这是我添加到我的页面的脚本,有太多我不确定我到底需要什么来完成这个Jquery 正在尝试将Ajax请求添加到Datatable,jquery,datatables,Jquery,Datatables,我正在尝试向我的表中添加一些功能,允许用户选择一行或多行,以便在用户单击delete按钮后,它将向服务器发送Ajax请求,从表中删除项目。我一直在看datatables网站,这是我添加到我的页面的脚本,有太多我不确定我到底需要什么来完成这个 $( '#table' ).dataTable({ "sDom": '<"top"lTf<"clear">>rt<"actions"<"actions-left"i><"actions-right"p&
$( '#table' ).dataTable({
"sDom": '<"top"lTf<"clear">>rt<"actions"<"actions-left"i><"actions-right"p>>',
"bAutoWidth": false,
"sPaginationType" : "full_numbers",
"oTableTools": {
"aButtons": [
{
"sExtends": "text",
"sButtonText": "Add"
},
{
"sExtends": "text",
"sButtonText": "Edit"
},
{
"sExtends": "text",
"sButtonText": "Delete",
"sAjaxUrl": "delete_title"
},
]
},
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "sWidth": "20px", "aTargets": [ 0 ] },
{ "sWidth": "40px", "aTargets": [ 1 ] },
{ "sClass": "alignCenter", "aTargets": [ 1 ] }
]
});
<?php
$tmpl = array ( 'table_open' => '<table class="table" id="titles-table">' );
$data = array('name' => 'titles', 'class' => 'selectall');
$this->table->set_heading(form_checkbox($data), 'ID', 'Title Name', 'Style', 'Status');
$this->table->set_template($tmpl);
foreach ($titles as $row)
{
$checkbox_data = array(
'name' => 'titles',
'id' => $row->id
);
$this->table->add_row(form_checkbox($checkbox_data), $row->id, $row->title_name, $row->type_name, $row->status_name);
}
echo $this->table->generate();
?>
还有人看到我遗漏了什么吗?检查示例
您需要将sAjaxSource添加到数据表初始化中,并在其中定义删除。此外,您可能需要将额外的服务器参数推送到服务器端。您可以使用以下内容:
//Example from one of my projects:
//This adds extra data to the ajax request sent by datatables.
"fnServerParams": function (aoData) {
aoData.push({ "name": "bu", "value": BU });
aoData.push({ "name": "SLAName", "value": SLANAME });
aoData.push({ "name": "substep", "value": STEP });
aoData.push({ "name": "timeperiod", "value": TIME });
var UserFilter = $("#userFilter").val();
aoData.push({ "name": "user", "value": UserFilter });
}
如果你需要更多的帮助或更多的细节,尽管问吧
//编辑1
$( '#table' ).dataTable({
"sDom": '<"top"lTf<"clear">>rt<"actions"<"actions-left"i><"actions-right"p>>',
"bAutoWidth": false,
"sPaginationType" : "full_numbers",
"sAjaxSource" : "/path/to/function",
"fnServerParams": function (aoData) {
aoData.Push(ArrayWithCheckboxInfo);
},
"oTableTools": {
"aButtons": [
{
"sExtends": "text",
"sButtonText": "Add"
},
{
"sExtends": "text",
"sButtonText": "Edit"
},
{
"sExtends": "text",
"sButtonText": "Delete",
"sAjaxUrl": "delete_title"
},
]
},
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "sWidth": "20px", "aTargets": [ 0 ] },
{ "sWidth": "40px", "aTargets": [ 1 ] },
{ "sClass": "alignCenter", "aTargets": [ 1 ] }
]
})
然后在服务器端,根据来自阵列的信息处理复选框。我不知道您是想从datatable还是数据库中删除该行,但您可以同时执行这两项操作,然后它会将更新后的数据发送到客户端。另一种方法是简单地使用jquery/javascript来完成您的请求。。这是我为一件非常相似的事情所做的一个例子,它不是对你事业的直接回答。。但是如果修改为与你的身份证等级相匹配,等等。。能为你的事业做很多事
$("#hideme").click(function(e)
{
e.preventDefault();
var postArray = new Array();
i=0;
$("input:checked").each(function()
{
var theID = $(this).attr("name");
theID = theID.replace("offerterms-", "");
postArray.push(theID);
$(this).parents("tr").animate(
{"color":"#FFF", "background-color":"#FFF"},
"5000",
function()
{
$("input:checked").parents("tr").remove();
$("table.datatable TR").removeClass("darkrow");
$("table.datatable TR:odd").addClass("darkrow");
});
});
$.post("./hide/", {"entry":postArray}, function(data)
{
if((".datatable tr").length == 1){$(".datatable").hide();$("#hideme").hide();$("#recordCount").text("0");}
else{$("#recordCount").text((parseInt($("#recordCount").text())-1));}
//alert(data.msg);
}, "json");
});
这实际上是在表上进行迭代,并构建一个复选框数组以发布到我的后端,此时我使用该数组来处理我的db条目,并在我的情况下隐藏数据,以便在另一个类似的表上使用,管理员可以查看并稍后取消隐藏这些数据。。无论如何,当在表上迭代时,它会在每行的基础上隐藏所有选中复选框的行。唯一的问题是,在单击“删除”按钮之前选中复选框时,它将是复选框的值。我不知道您将有多少个复选框,但您可以按一个包含这些值的数组和所有复选框的索引。你能更新你的答案吗,因为我不了解主要发生了什么,以及它将如何应用到我的代码中。我将从复选框中的何处创建值数组。我不应该将sAjaxSource和参数移到delete按钮,因为我只希望在单击“删除”按钮。