Javascript DataTables:fnGetData切换到服务器端处理后不工作
我已经在DataTables（版本1.10）中从客户端处理切换到服务器端处理，以提高性能（在“dom”下面添加行）。Javascript DataTables:fnGetData切换到服务器端处理后不工作,javascript,jquery,datatables,Javascript,Jquery,Datatables,我已经在DataTables（版本1.10）中从客户端处理切换到服务器端处理，以提高性能（在“dom”下面添加行）。 DataTables本身按预期工作，但从那时起，我在从单个行或单元格获取数据时遇到了问题 var tableDT = $('#tblReport').dataTable({ dom: 'Bfrtip', "bProcessing": true, "bServerSide": true, "sAjax
DataTables本身按预期工作，但从那时起，我在从单个行或单元格获取数据时遇到了问题
var tableDT = $('#tblReport').dataTable({
dom: 'Bfrtip',
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "data.php",
"aoColumns": aoCols,
// ...
在使用服务器端处理或我现在必须更改的任何内容时，是否有其他方法可以做到这一点
$(document).on('click', '.showPrinters', function(e) {
e.preventDefault();
currentRow = $(this).closest('tr');
var itemId = $('#tblReport').dataTable().fnGetData(currentRow)[0]; // this should return the text of the first td (in my case it is hidden by default)
// ...
谢谢，Tom您好，如果您从Datatable获取数据，您可以通过0索引唯一值获取行alldataby 如果数据匹配 如果您的datatble var=tableDT
var indexes = **tableDT**.rows().eq(0).filter(function (rowIdx) {
return **tableDT**.cell(rowIdx, 0).data() == id ? true : false;
});
var row = view_table.rows(indexes)
.nodes();
tableDT.rows（index.data（）[0]嗨，如果从Datatable获取数据，则可以通过0索引唯一值获取行alldataby 如果数据匹配 如果您的datatble var=tableDT
var indexes = **tableDT**.rows().eq(0).filter(function (rowIdx) {
return **tableDT**.cell(rowIdx, 0).data() == id ? true : false;
});
var row = view_table.rows(indexes)
.nodes();
tableDT.rows（index.data（）[0]我在驱动器中共享文件[https://drive.google.com/file/d/1Iv8Bq1iDGZVW2B82NSP-WqNG6O6brq57/view?usp=sharing][1] 服务器文件和html
<html>
<head>
<title>Test APP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
</script>
<meta charset="UTF-8">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Click on the Edit Icon</h2>
<table id="view_table" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Edit</th>
</tr>
</thead>
</table>
<br>
<div id="console" style="height:270px; border: 1px dashed #ccc;"></div>
</body>
<script type="text/javascript">
var view_table;
$(function () {
initTable();
});
function initTable() {
var action_init = "get_data";
view_table = $('#view_table').DataTable({
"ajax": {
"url": "server.php",
"type": "POST",
data: {
action: action_init
}
}, responsive: true,
"processing": true,
"serverSide": true,
"columns": [
{"data": "id"},
{"data": "fname"},
{"data": "lname"},
{"data": ""},
],
"columnDefs": [
{"width": "20px", "targets": [0]},
{className: "center-text ", "targets": [2]},
{
"targets": [0, 1, 2],
"orderable": false,
},
{
"targets": [0],
"visible": false,
},
{
"render": function (data, type, row) {
return '<i class="fa fa-edit edit_item" access="edit" data-id="' + row["id"] + '" ></i>';
},
"targets": 3
},
],
"order": [[0, "ASC"]]
});
}
//HERE WE GET DATA WHEN CLICK EDIT BTN
//edit_item LINE 77 CLASS edit_item
$(document).on("click", ".edit_item", function () {
var id = ($(this).data("id"));
if ($(this).hasClass("edit_item")) {
$("#console").text( );
$("#console").html("You can parse the <b>getDTRow(id)</b> AS JSON TO GET DATA <br> <br>" + JSON.stringify(getDTRow(id)));
}
});
function getDTRow(id) {
var indexes = view_table.rows().eq(0).filter(function (rowIdx) {
// console.log(rowIdx)
return view_table.cell(rowIdx, 0).data() == id ? true : false;
});
var row = view_table.rows(indexes)
.nodes();
return view_table.rows(indexes).data()[0];
}
</script>
</html>
测试应用程序
单击编辑图标
名字
姓
编辑
var视图_表；
$（函数（）{
initTable（）；
});
函数initTable（）{
var action_init=“获取数据”；
view_table=$（'#view_table'）。数据表({
“ajax”：{
“url”：“server.php”，
“类型”：“职位”，
数据：{
动作：动作_init
}
}，回答：是的，
“处理”：对，
“服务器端”：正确，
“栏目”：[
{“数据”：“id”}，
{“数据”：“fname”}，
{“数据”：“lname”}，
{“数据”：“}，
],
“columnDefs”：[
{“宽度”：“20px”，“目标”：[0]}，
{className:“中心文本”，“目标”：[2]}，
{
“目标”：[0,1,2]，
“可订购”：错误，
},
{
“目标”：[0]，
“可见”：假，
},
{
“渲染”：函数（数据、类型、行）{
返回“”；
},
“目标”：3
},
],
“订单”：[[0，“ASC”]]
});
}
//在这里，我们得到数据时，点击编辑BTN
//编辑项目行77类编辑项目
$（文档）。在（“单击“，”上。编辑项目”，函数（）{
var id=（$（this.data（“id”））；
if（$（this）.hasClass（“编辑项”））{
$（“#控制台”）.text（）；
$（“#控制台”）.html（“您可以将getDTRow（id）解析为JSON以获取数据
”+JSON.stringify（getDTRow（id））；
}
});
函数getDTRow（id）{
var index=view_table.rows（）.eq（0）.filter（函数（rowIdx）{
//console.log（rowIdx）
返回视图_table.cell（rowIdx，0）.data（）==id？true:false；
});
var row=查看表格行（索引）
.nodes（）；
返回视图_table.rows（index.data（）[0]；
}
<html>
<head>
<title>Test APP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
</script>
<meta charset="UTF-8">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Click on the Edit Icon</h2>
<table id="view_table" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Edit</th>
</tr>
</thead>
</table>
<br>
<div id="console" style="height:270px; border: 1px dashed #ccc;"></div>
</body>
<script type="text/javascript">
var view_table;
$(function () {
initTable();
});
function initTable() {
var action_init = "get_data";
view_table = $('#view_table').DataTable({
"ajax": {
"url": "server.php",
"type": "POST",
data: {
action: action_init
}
}, responsive: true,
"processing": true,
"serverSide": true,
"columns": [
{"data": "id"},
{"data": "fname"},
{"data": "lname"},
{"data": ""},
],
"columnDefs": [
{"width": "20px", "targets": [0]},
{className: "center-text ", "targets": [2]},
{
"targets": [0, 1, 2],
"orderable": false,
},
{
"targets": [0],
"visible": false,
},
{
"render": function (data, type, row) {
return '<i class="fa fa-edit edit_item" access="edit" data-id="' + row["id"] + '" ></i>';
},
"targets": 3
},
],
"order": [[0, "ASC"]]
});
}
//HERE WE GET DATA WHEN CLICK EDIT BTN
//edit_item LINE 77 CLASS edit_item
$(document).on("click", ".edit_item", function () {
var id = ($(this).data("id"));
if ($(this).hasClass("edit_item")) {
$("#console").text( );
$("#console").html("You can parse the <b>getDTRow(id)</b> AS JSON TO GET DATA <br> <br>" + JSON.stringify(getDTRow(id)));
}
});
function getDTRow(id) {
var indexes = view_table.rows().eq(0).filter(function (rowIdx) {
// console.log(rowIdx)
return view_table.cell(rowIdx, 0).data() == id ? true : false;
});
var row = view_table.rows(indexes)
.nodes();
return view_table.rows(indexes).data()[0];
}
</script>
</html>
测试应用程序
单击编辑图标
名字
姓
编辑
var视图_表；
$（函数（）{
initTable（）；
});
函数initTable（）{
var action_init=“获取数据”；
view_table=$（'#view_table'）。数据表({
“ajax”：{
“url”：“server.php”，
“类型”：“职位”，
数据：{
动作：动作_init
}
}，回答：是的，
“处理”：对，
“服务器端”：正确，
“栏目”：[
{“数据”：“id”}，
{“数据”：“fname”}，
{“数据”：“lname”}，
{“数据”：“}，
],
“columnDefs”：[
{“宽度”：“20px”，“目标”：[0]}，
{className:“中心文本”，“目标”：[2]}，
{
“目标”：[0,1,2]，
“可订购”：错误，
},
{
“目标”：[0]，
“可见”：假，
},
{
“渲染”：函数（数据、类型、行）{
返回“”；
},
“目标”：3
},
],
“订单”：[[0，“ASC”]]
});
}
//在这里，我们得到数据时，点击编辑BTN
//编辑项目L