如何删除一行没有Ajax请求 [英] How to delete a row without Ajax request
问题描述
使用jQuery数据表1.9.4，我只是张贴行ID服务器，当它从数据库中删除，还是回到阿贾克斯成功（）功能我用 fnDeleteRow（）排功能，从表中删除此行。
但是，这会触发 fnDraw（）函数初始化，使一个Ajax请求，这是不必要的服务器。
我怎么能简单地删除该行并安排表上的客户端？
confirmDelete =功能（）
{
VAR数据= {
ROWID _：ROWID
};
$阿贾克斯（{
网址：../../控制器/ ObjectController.php5
键入：POST，
数据类型：JSON，
数据：数据，
成功：功能（数据）{
调试器
如果（data.Success）
{
tableObjects.fnDeleteRow（$（＃TR _+ ROWID），函数（）{
event.theme ='灰';
event.heading ='＆LT;我类= \'发发检查\'＆GT;＆LT; / I＆GT;过程已完成;
event.message ='行成功删除。;
NTF（事件）;
}）;
}
这是我的taable定义：
VAR tableObjects = $（＃objectTable）。数据表（{
bProcessing：假的，
bServerSide：真实，
sAjaxSource：../../Controller/ObjectController.php5，
aoColumns：[
{mDataProp：NAME}，
{mDataProp：类型}，
{mDataProp：IP}，
{mDataProp：备注}，
{mDataProp：btnEdit}，
{mDataProp：btnDelete}
]
fnServerData：功能（sSource，aoData，fnCallback）{
aoData.push（{名：表名，值：物}）
调试器
$阿贾克斯（{
数据类型：JSON，
的contentType：应用/ JSON的;字符集= UTF-8，
类型：GET，
URL：sSource，
数据：aoData，
成功：功能（结果）{
policyCount =结果[iTotalRecords];
$每个（result.aaData，函数（指数值）{
result.aaData [指数] [btnEdit] =＆LT;一个ID = \btnEdit \级= \BTN BTN-SM BTN-成功\的风格= \边界半径：4PX \ onclick=\"fillFormwithDatasforEdit('"+value.NAME+"','"+value.REMARK+"','"+value.TYPE+"','"+value.IP+"')\" HREF = \＃mdlObjects \数据切换= \模态\＆GT;＆LT;我类= \发发编辑\＆GT;＆LT; / I＆gt;编辑＆LT; / A＆gt;中;
result.aaData [指数] [btnDelete] =＆LT;一类= \BTN BTN-SM BTN-危险\的href = \＃基本\风格= \边界半径：4PX \的onclick = \setModalTitle（'+ value.NAME +，DeleteObject'）\数据切换= \模态\＆GT;＆LT;我类= \发FA-垃圾-O \＆GT;＆LT; / I＆GT;删除＆所述; / A＆gt;中;
result.aaData [指数] [备注] =＆LT;一类= \BTN BTN-SM BTN-信息\风格= \边界半径：4PX \的onclick = \setremark（'+价值.NAME +，+ value.REMARK +'）\数据切换= \模态\的href = \＃全\＆GT;＆LT;我类= \发发注释\＆GT ;＆所述; / I GT;备注＆所述; / A＆gt;中;
}）;
fnCallback（结果）;
}，
错误：函数（XHR，textStatus，错误）{
如果（typeof运算控制台==对象）{
的console.log（xhr.status +，+ xhr.responseText +，+ textStatus +，+误差）;
}
}}）;
}，
oLanguage：{
sLengthMenu：＆LT;选择＆GT; +
'＆LT;期权价值=5＆GT; 5℃/选项＆GT; +
'＆LT;期权价值=10＆GT; 10＆LT; /选项＆GT; +
'＆LT;期权价值=20＆GT; 20℃/选项＆GT; +
'＆LT;期权价值=30＆GT; 30℃/选项＆GT; +
'＆LT;期权价值=40＆GT; 40℃/选项＆GT; +
'＆LT;期权价值=50＆GT; 50℃/选项＆GT; +
'＆LT; /选择＆GT;显示'
}，
fnCreatedRow：功能（nRow，ADATA，iDataIndex）{
对象名= ADATA [名称];
newRowID =tr_+对象名;
$（nRow）.attr（'身份证'，newRowID）;
$（nRow）.find（'TD'）。每个（函数（指数）{
newRowID =指数== 0对象名+_对象名：？？索引== 1对象名+_type
：索引== 2对象名+_ ip地址：？？索引== 3对象名+_ btnremark
？？：索引== 4对象名+_btnedit：指数= = 5对象名+_ btndelete：;
$（本）.attr（'身份证'，newRowID）;
}）;
}，
fnDrawCallback：函数（）{
}，
aaSorting：[
[2，'递增']
]
aLengthMenu：[
[5，15，20，-1]，
[5，15，20，全部] //每页值改变这里
]
iDisplayLength：5
}）;
客户端处理模式
在客户端处理模式（bServerSide：假）， fnRowDelete（）不会触发Ajax请求。
请参阅此的jsfiddle 的示范。查找要求的时候提出要求控制台。
服务器端处理模式
然而，在服务器端处理模式（bServerSide：真正的）， fnRowDelete（）将触发Ajax请求。
备注
API方法 fnRowDelete（）有第三个可选的布尔参数，确定表是否应该做一个重绘。例如：
oTable.fnRowDelete（0，函数（）{执行console.log（'删除'）;}，FALSE）;
如果再次平局不要求，你将负责与重新绘制表格自己以后fnDraw（）这也接受可选的布尔参数，确定是否再过滤器和抽签之前诉诸表。例如：
oTable.fnDraw（假）;
Using jQuery DataTables 1.9.4, I simply post row ID to server and when it's deleted from the database and comes back to ajax success() function I use fnDeleteRow() row function to delete this row from the table.
But this triggers fnDraw() function init and makes an Ajax request to the server that is unnecessary.
How can I simply delete this row and arrange table on client side ?
confirmDelete = function()
{
var data = {
"rowid_":rowid
};
$.ajax({
url:"../../Controller/ObjectController.php5",
type:"POST",
dataType: "json",
data: data,
success: function(data) {
debugger
if(data.Success)
{
tableObjects.fnDeleteRow($("#tr_"+rowid),function(){
event.theme ='lime';
event.heading ='<i class=\'fa fa-check\'></i> Process Completed';
event.message ='Row deleted successfully.';
ntf(event);
});
}
here is my taable definition:
var tableObjects = $("#objectTable").DataTable({
"bProcessing": false,
"bServerSide": true,
"sAjaxSource": "../../Controller/ObjectController.php5",
"aoColumns": [
{ "mDataProp": "NAME"},
{ "mDataProp": "TYPE"},
{ "mDataProp": "IP"},
{ "mDataProp": "REMARK"},
{"mDataProp": "btnEdit"},
{"mDataProp": "btnDelete"}
],
"fnServerData": function (sSource, aoData, fnCallback){
aoData.push({"name":"tablename","value":"objects"})
debugger
$.ajax({
"dataType": "json",
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success": function(result){
policyCount = result["iTotalRecords"];
$.each(result.aaData, function(index,value){
result.aaData[index]["btnEdit"] ="<a id=\"btnEdit\" class=\"btn btn-sm btn-success\" style=\"border-radius:4px\" onclick=\"fillFormwithDatasforEdit('"+value.NAME+"','"+value.REMARK+"','"+value.TYPE+"','"+value.IP+"')\" href=\"#mdlObjects\" data-toggle=\"modal\"><i class=\"fa fa-edit\"></i> Edit </a>";
result.aaData[index]["btnDelete"] ="<a class=\"btn btn-sm btn-danger\" href=\"#basic\" style=\"border-radius:4px\" onclick=\"setModalTitle('"+value.NAME+"','DeleteObject')\" data-toggle=\"modal\"><i class=\"fa fa-trash-o\"></i> Delete </a>";
result.aaData[index]["REMARK"] ="<a class=\"btn btn-sm btn-info\" style=\"border-radius:4px\" onclick=\"setremark('"+value.NAME+"','"+ value.REMARK +"')\" data-toggle=\"modal\" href=\"#full\"><i class=\"fa fa-comment\"></i> Remark</a>";
});
fnCallback(result);
},
error: function (xhr, textStatus, error){
if (typeof console == "object") {
console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
}
}});
},
"oLanguage": {
"sLengthMenu": '<select>' +
'<option value="5">5</option>' +
'<option value="10">10</option>' +
'<option value="20">20</option>' +
'<option value="30">30</option>' +
'<option value="40">40</option>' +
'<option value="50">50</option>' +
'</select> Show'
},
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
objectname = aData["NAME"];
newRowID = "tr_" +objectname;
$(nRow).attr('id', newRowID);
$(nRow).find('td').each (function(index) {
newRowID = index==0?objectname+"_objectname":index==1?objectname+ "_type"
:index==2?objectname+"_ipaddress":index==3?objectname+"_btnremark"
:index==4?objectname+ "_btnedit":index==5?objectname+"_btndelete":"";
$(this).attr('id', newRowID);
});
},
"fnDrawCallback": function(){
},
"aaSorting": [
[2, 'asc']
],
"aLengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
"iDisplayLength": 5
});
Client-side processing mode
In client-side processing mode ("bServerSide": false), fnRowDelete() doesn't trigger Ajax request.
See this JSFiddle for demonstration. Look for Request in the console when the request is made.
Server-side processing mode
However, in server-side processing mode ("bServerSide": true), fnRowDelete() will trigger Ajax request.
Notes
API method fnRowDelete() has a third optional boolean argument that determines whether table should do a redraw. For example:
oTable.fnRowDelete(0, function(){ console.log('Deleted'); }, false);
If re-draw is not request, you would be responsible to re-draw the table yourself later with fnDraw() which also accepts optional boolean argument that determines whether to re-filter and resort the table before the draw. For example:
oTable.fnDraw(false);
这篇关于如何删除一行没有Ajax请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
