更改字段后刷新数据表且无 ajax
Posted
技术标签:
【中文标题】更改字段后刷新数据表且无 ajax【英文标题】：Datatable refresh after change field and no ajax 【发布时间】：2021-10-11 17:17:42 【问题描述】：我要做的是对具有复选框的数据表列进行排序。问题是：它不起作用，因为我正在更改列值。 由于它不是ajax生成的，我不能使用reload()方法，如何重绘它？
jsFiddle code
<table id="tableEditable">
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Info 1</td>
<td>Info 2</td>
<td><span id="spanChk1">0</span><input type="checkbox" id="chk1" onclick="changeValue('spanChk1', this.checked)"></td>
</tr>
<tr>
<td>Info 3</td>
<td>Info 4</td>
<td><span id="spanChk2">0</span><input type="checkbox" id="chk2" onclick="changeValue('spanChk2', this.checked)"></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function ()
$('#tableEditable').DataTable(
"columnDefs": [
"targets": 2,
"orderDataType": "dom-checkbox"
],
"paging": false,
"order": [[1, "asc"]]
);
);
function changeValue(spanId, checked)
if (!checked)
$("#" + spanId).text('0');
else
$("#" + spanId).text('1');
</script>
【问题讨论】：
【参考方案1】：您可以使用以下方法对包含复选框的列进行排序。
行为如下：
当复选框列未排序时，单击复选框将简单地选中和取消选中它。
当复选框列被排序时，所有选中的行将被排序到表格的顶部（当应用“升序”时），或底部（用于“降序”）。
如果在该列已应用排序时单击复选框，则该行将立即移动，如有必要，以确保保留排序顺序。
代码如下：
$(document).ready(function()
$.fn.dataTable.ext.type.order['check-sort-pre'] = function ( data )
return data.includes('checked=""') ? 0 : 1;
;
var table = $('#tableEditable').DataTable(
columnDefs: [
type: "check-sort",
targets: 2
]
);
$( "#tableEditable" ).on( "click", "input:checkbox", function()
var cell = table.cell( $(this).parent() );
var checkhtml = cell.data();
if (checkHtml.includes('checked=""'))
checkHtml = checkHtml.replace('checked=""', '');
else
index = checkHtml.length -1;
checkHtml = checkHtml.slice(0, index) + ' checked=""' + checkHtml.slice(index);
cell.data(checkHtml);
table.draw( true );
);
);<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="tableEditable">
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Info 1</td>
<td>Info 2</td>
<td><input type="checkbox" id="chk1"></td>
</tr>
<tr>
<td>Info 3</td>
<td>Info 4</td>
<td><input type="checkbox" id="chk2"></td>
</tr>
<tr>
<td>Info 5</td>
<td>Info 6</td>
<td><input type="checkbox" id="chk3"></td>
</tr>
<tr>
<td>Info 7</td>
<td>Info 8</td>
<td><input type="checkbox" id="chk4" checked></td>
</tr>
<tr>
<td>Info 9</td>
<td>Info 10</td>
<td><input type="checkbox" id="chk5"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>这里使用了两种不同的技术：
定义了自定义数据类型 (type: "check-sort")，然后 $.fn.dataTable.ext.type.order['check-sort-pre'] 函数使用该类型。该函数检测复选框是否被选中。如果选中复选框，则返回0，否则返回1。由于0 低于1，因此选中的行排在未选中的行之前（假设升序排序）。
声明了一个委托事件处理程序，以捕获复选框单击。如果复选框已被选中，则调整复选框的 HTML 以删除 checked 属性（否则添加该属性）。然后使用更新后的 HTML 来更新 DataTable 单元格 - cell.data(checkHtml) - 最后重新绘制表格：table.draw( true )。
这里唯一要注意的是：当他们看到行移动（或者甚至可能明显消失，如果它们被排序到不同的页面）时，如果他们被选中/取消选中，这可能会让您的用户感到不安，因为应用排序顺序。
【讨论】：
感谢您的关注，但它没有用。我尝试过这种方式并工作：jsfiddle.net/ex84vnf3/1 只有当您使用"paging": false 强制每一行都在一个页面上时，您的方法才有效。我的方法没有这个限制。
但我尝试了你的建议，但没有奏效：C
如果你点击上面蓝色的“运行代码片段”按钮，你能描述一下什么不起作用吗？您看到了什么行为，这不是您所期望的？
抱歉耽搁了。 idk 为什么你的例子不能在 jsfiddle 上工作，但是“运行代码 sn-p”是的。顺便说一句，因为我没有使用分页，所以它解决了。又来了以上是关于更改字段后刷新数据表且无 ajax的主要内容，如果未能解决你的问题，请参考以下文章
键盘输入时，如何在Ajax调用URL更改后停止MVC页面刷新
如何使用ajax更改事件对象后刷新fullcalendar v4