jQuery DataTable分页时serializeArray仅获取前10条数据问题

需要获取DataTable表格内的所有条目数据，开启分页功能后，使用serializeArray()方法仅能捕获当前页显示的前10条数据，无法获取其余分页的全部数据。

原代码片段 #

DataTable初始化代码 #

table_pedido = $("#view_pedido_nuevo").DataTable({
      processing: true,
      destroy: true,
      paging: true,
      lengthChange: true,
      searching: true,
      ordering: true,
      info: true,
      autoWidth: true,
      scrollX: true,
      scrollY: true,
      data: data,
      language: espanol,
      columns: [
        { data: "CODARTICULO", className: "text-center" },
        { data: "DESCRIPCION", className: "text-center" },
        {
          data: "CODARTICULO",
          render: function (data, type, datos, row) {
            return `<input type="number" value="0" class="form-control">
            <input type="text" value="${datos.CODARTICULO}" name="input_name_cod[]" class="form-control">
            <input type="text" value="${datos.DESCRIPCION}" name="input_name_des[]" class="form-control">
            `;
          },
        },
      ],
    });

按钮点击事件代码 #

$("#btn_transferencia_grupo_enviar").on("click", function () {
let cod_articulo = $(
  "#view_pedido_nuevo tbody tr :input[name='input_name_cod[]']"
).serializeArray()});

控制台输出 #

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {name: 'input_name_cod[]', value: '13532'}
1: {name: 'input_name_cod[]', value: '13533'}
2: {name: 'input_name_cod[]', value: '13534'}
3: {name: 'input_name_cod[]', value: '13537'}
4: {name: 'input_name_cod[]', value: '13538'}
5: {name: 'input_name_cod[]', value: '13539'}
6: {name: 'input_name_cod[]', value: '13541'}
7: {name: 'input_name_cod[]', value: '13543'}
8: {name: 'input_name_cod[]', value: '13544'}
9: {name: 'input_name_cod[]', value: '13545'}

DataTables开启分页时，默认只会把当前页的行节点渲染到DOM树中，其余分页的行节点会从DOM里移除，并非只是隐藏。直接用jQuery选择器查询#view_pedido_nuevo tbody下的输入框，只能匹配到当前页存在于DOM中的10个元素，自然拿不到其他分页的数据。

根据业务场景二选一即可：

• 场景1：不需要获取用户在数量输入框手动修改的动态值，仅需获取CODARTICULO、DESCRIPCION这类初始化时就存在的固定数据
  直接调用DataTables原生API读取全量数据源，不需要查询DOM，性能最好，完全不受分页、搜索、排序的影响。

  $("#btn_transferencia_grupo_enviar").on("click", function () {
    // 获取全量行数据，自动跨所有分页
    const allData = table_pedido.rows().data().toArray();
    // 组装和serializeArray格式一致的结果
    const cod_articulo = allData.map(item => ({
      name: 'input_name_cod[]',
      value: item.CODARTICULO
    }));
    const des_articulo = allData.map(item => ({
      name: 'input_name_des[]',
      value: item.DESCRIPCION
    }));
  
    console.log(cod_articulo);
    // 后续业务逻辑写这里
  });
  

• 场景2：需要获取用户在输入框中填写的动态值（比如用户修改了数量输入框的数值）
  不要直接用jQuery查DOM，改用DataTable实例提供的$()查询方法，该方法会匹配DataTable缓存的所有行节点，不受分页限制。

  $("#btn_transferencia_grupo_enviar").on("click", function () {
    // 直接查询全表所有匹配的输入框，跨所有分页
    const cod_articulo = table_pedido.$('input[name="input_name_cod[]"]').serializeArray();
    const des_articulo = table_pedido.$('input[name="input_name_des[]"]').serializeArray();
    const cantidad = table_pedido.$('input[type="number"]').serializeArray();
  
    console.log(cod_articulo);
    // 后续业务逻辑写这里
  });
  

注意：如果使用第二种方案，不要开启deferRender: true配置，该配置开启后DataTables只会在用户跳转到对应分页时才渲染行节点，会导致未访问过的分页的输入框无法被查询到。当前初始化代码未开启该配置（默认值为false），可以直接使用。

内容的提问来源于stack exchange，提问作者Analista de Sistemas