Datatable 激活单个单元格编辑 onclick(第 2 部分)
Datatable activate single cell editing onclick (part 2)
继续我之前在这里发现的问题:
我终于能够只用一个单元格来激活输入字段 onclick。
我的新问题是,虽然我可以单击单个单元格并激活它,但是当我使用数据表过滤器搜索或转到数据表的另一页时,单元格激活不再有效。
$.ajax({
url: 'api/searchVoyageInfo.php',
type: 'POST',
data: '',
dataType: 'html',
success: function(data, textStatus, jqXHR){
var jsonObject = JSON.parse(data);
var table = $('#example1').DataTable({
"data": jsonObject,
"columns": [{
{ "data": "COLUMN1" },
{
"data": "COLUMN2",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
{
$(nTd).html("<a href='#' class='checkBound"+oData.VOYID+"' id='checkBound'
data-uid='"+oData.VOYID+"'>"+oData.COLUMN2+"</a>
<input type='text' class='editbound"+oData.VOYID+"'
id='editbound' data-uid='"+oData.VOYID+"'
value='"+oData.BOUND+" display: none;' />");
}
},
{ "data": "COLUMN3" },
// few more columns
}],
"iDisplayLength": 50,
"paging": true,
"bDestroy": true,
"autoWidth": true,
"dom": 'Bfrtip',
"buttons": [
// some extend buttons
]
});
},
error: function(// some stuff){
// do some other stuff
// this part is not important
}
});
如果您注意到上面的 COLUMN2 部分,我在 href 的 checkBound class 中添加了一个 VOYID 值。我还将 VOYID 添加到输入的 editbound class。这样做可以防止每个 checkBound class 使用下面的 onclick 事件激活输入:
$('#example1').on('click', 'tr > td > a.checkBound', function(e)
{
e.preventDefault();
var $dataTable = $('#example1').DataTable();
var tr = $(this).closest('tr');
var data = $dataTable.rows().data();
var rowData = data[tr.index()];
var voyid = rowData.VOYID;
console.log(voyid);
$('.checkBound'+voyid).hide();
$('.editbound'+voyid).show();
});
使用以上所有方法,在数据表的第一页上,我可以成功激活来自单个单元格的输入 onclick。但它只适用于第一页。我无法在任何其他页面上激活输入。
我尝试将 onclick 事件从使用 class 切换到使用 id 实现相同的结果。
我该如何解决这个问题?
您可以隐藏 link 并在您的点击事件处理程序中使用以下代码显示该字段
e.preventDefault();
$(this).hide().next().show();
继续我之前在这里发现的问题:
我终于能够只用一个单元格来激活输入字段 onclick。
我的新问题是,虽然我可以单击单个单元格并激活它,但是当我使用数据表过滤器搜索或转到数据表的另一页时,单元格激活不再有效。
$.ajax({
url: 'api/searchVoyageInfo.php',
type: 'POST',
data: '',
dataType: 'html',
success: function(data, textStatus, jqXHR){
var jsonObject = JSON.parse(data);
var table = $('#example1').DataTable({
"data": jsonObject,
"columns": [{
{ "data": "COLUMN1" },
{
"data": "COLUMN2",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
{
$(nTd).html("<a href='#' class='checkBound"+oData.VOYID+"' id='checkBound'
data-uid='"+oData.VOYID+"'>"+oData.COLUMN2+"</a>
<input type='text' class='editbound"+oData.VOYID+"'
id='editbound' data-uid='"+oData.VOYID+"'
value='"+oData.BOUND+" display: none;' />");
}
},
{ "data": "COLUMN3" },
// few more columns
}],
"iDisplayLength": 50,
"paging": true,
"bDestroy": true,
"autoWidth": true,
"dom": 'Bfrtip',
"buttons": [
// some extend buttons
]
});
},
error: function(// some stuff){
// do some other stuff
// this part is not important
}
});
如果您注意到上面的 COLUMN2 部分,我在 href 的 checkBound class 中添加了一个 VOYID 值。我还将 VOYID 添加到输入的 editbound class。这样做可以防止每个 checkBound class 使用下面的 onclick 事件激活输入:
$('#example1').on('click', 'tr > td > a.checkBound', function(e)
{
e.preventDefault();
var $dataTable = $('#example1').DataTable();
var tr = $(this).closest('tr');
var data = $dataTable.rows().data();
var rowData = data[tr.index()];
var voyid = rowData.VOYID;
console.log(voyid);
$('.checkBound'+voyid).hide();
$('.editbound'+voyid).show();
});
使用以上所有方法,在数据表的第一页上,我可以成功激活来自单个单元格的输入 onclick。但它只适用于第一页。我无法在任何其他页面上激活输入。
我尝试将 onclick 事件从使用 class 切换到使用 id 实现相同的结果。
我该如何解决这个问题?
您可以隐藏 link 并在您的点击事件处理程序中使用以下代码显示该字段
e.preventDefault();
$(this).hide().next().show();