更改字段后刷新数据表且无 ajax答案

【问题标题】：Datatable refresh after change field and no ajax更改字段后刷新数据表且无 ajax
【发布时间】：2021-10-11 17:17:42
【问题描述】：

我要做的是对具有复选框的数据表列进行排序。问题是：它不起作用，因为我正在更改列值。由于它不是ajax生成的，我不能使用reload()方法，如何重绘它？

<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>

【问题讨论】：

标签： jquery datatable datatables

【解决方案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”是的。顺便说一句，因为我没有使用分页，所以它解决了。又来了