jquery datatables:按钮后更新表单元格 [英] jquery datatables: update table cell after button click
问题描述
我们在页面中有一个表,最后有几行和一个自定义切换按钮。
表是通过页面加载,而不是通过json。
we have a table in our page, with a few rows and a custom toggle button at the end. the table is loaded via html in the page, not via json.
现在,最后的togglebutton发布到一个服务,并设置了该数据库中的记录。
now, the togglebutton at the end posts to a service and sets the follow state of that record in the database.
但是,它也应该更新该行中的另一个单元格。
但是我确定我不应该手动通过jquery通过数据表?
however, it should also make an update to another cell in that row. however i'm sure i should not do this via jquery manually but via datatables?
$('#tblFollow').dataTable({
sDom: "t",
aoColumns: [
null,
null,
null,
{ bSortable: false }
]
});
$('#tblFollow').on('click', 'a.follow', function(e){
$(this).toggleClass('active');
// updating column 'following' here...
// but this only changes visually, and not the inner datatables data used for sorting
var followingCell = $(this).parents('td').prev();
var txt = followingCell.text() == "1" ? "0" : "1";
followingCell.text(txt);
return false;
});
手动示例:
现在我有一个例子,我手动更改字段,但这只是可视化,datatable仍然使用其内部数据进行排序。所以我正在寻找一种更好的方式来实现
manual example: now i have an example, where i change the fields manually, but that's only visual, the datatable still uses its inner data for sorting. So i'm looking for a way to do it better
推荐答案
这是一个可能的解决方案:
Here is a possible solution:
除了你的代码,你应该更新数据表数据,如下所示:
In addition to your code you should update the datatables data as following
var rowIndex = table.fnGetPosition( $(this).closest('tr')[0] );
var aData = table.fnGetData( rowIndex );
aData[2] = txt; //third column
更好的解决方案将是使用 fnUpdate
更新数据并同时显示
And even better solution would be to use fnUpdate
to update the data and display in the same time
这里 jsfiddle
// update column following here...
var followingCell = $(this).parents('td').prev();
var txt = followingCell.text() == "1" ? "0" : "1";
var rowIndex = table.fnGetPosition( $(this).closest('tr')[0] );
table.fnUpdate( txt, rowIndex , 2);
而不是我们
Also instead of us
var followingCell = $(this).parents('td').prev();
var txt = followingCell.text() == "1" ? "0" : "1";
使用
var aData = table.fnGetData( rowIndex );
aData[2] //use it to check if the value is 0 or 1
这篇关于jquery datatables:按钮后更新表单元格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!