更改字段后数据表刷新并且没有 ajax

Question

我想要做的是对具有复选框的数据表列进行排序。问题是：它不起作用，因为我正在更改列值。由于它不是 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>

Answer 1

您可以使用以下方法对包含复选框的列进行排序。

行为如下：

当复选框列未排序时，单击复选框只会选中和取消选中它。
当复选框列排序时，所有选中的行将排序到 table 的顶部（当应用“升序”时），或底部（对于“降序” ").
如果在该列已应用排序时单击复选框，则该行将立即移动（如有必要）以确保保留排序顺序。

代码如下：

$(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'] 函数使用。该函数检测复选框是否被选中。如果复选框被选中，它 returns 0 ，否则 1 。由于 0 低于 1，因此选中的行排在未选中的行之前（假设升序排序）。
已声明委托事件处理程序，以捕获复选框点击。如果复选框已被选中，则调整复选框的 HTML 以删除 checked 属性（否则添加属性）。然后使用更新后的 HTML 更新 DataTable 单元格 - cell.data(checkHtml) - 最后重新绘制 table：table.draw( true ).

这里唯一要注意的是：当用户看到行移动（或者甚至可能明显消失，如果它们被排序到不同的页面）时，这可能会让您的用户感到不安 checked/unchecked，由于应用的排序顺序。

更改字段后数据表刷新并且没有 ajax

Datatable refresh after change field and no ajax

datatable

jquery

datatables