将复选框添加到数据表 jquery

Posted 2023-05-07

【中文标题】将复选框添加到数据表 jquery

【英文标题】：add checkbox to datatable jquery

【发布时间】：2020-12-20 15:45:09

【问题描述】：

我无法在表格中添加复选框，我尝试了很多东西，但一切都是徒劳的

jQuery 代码：

$(document).ready(function() 
  var total = [];
  $.ajax(
    url: 'user.json',
    dataType: 'json',
    success: function(json) 
      // get the `airport` array 
      var device = json.siteList;
      var j = 1;

      // loop through the array to populate your list
      $.each(device, function(i, sites) 
        // console.log(sites.siteName)
        // $('#data_table').append("<tr>" + "<td>" + sites.siteName + "</td>" + "</tr>");
        $.each(sites.deviceList, function(i, values) 

          item = 
          item['siteName'] = sites.siteName;
          item["deviceName"] = values.deviceName;
          item["count"] = values.count;
          total.push(item);

        );
      );

      $('#rpa_table').DataTable(
        columnDefs: [
          orderable: false,
          className: 'select-checkbox',
          targets: 0
        ],
        select: 
          style: 'os',
          selector: 'td:first-child'
        ,
        order: [
          [1, 'asc']
        ], 
          "aaData": total,
          "aoColumns": [
              "sTitle": "Site",
              "mData": "siteName"
            ,
            
              "sTitle": "Cabinet",
              "mData": "deviceName"
            ,
            
              "sTitle": "Count",
              "mData": "count"
            ,
          ],

        );

    
  );
  // Handle click on "Select all" control
  // Handle click on "Select all" control
  $('#checkall').on('click', function() 
    // Check/uncheck all checkboxes in the table
    var rows = table.rows(
      'search': 'applied'
    ).nodes();
    $('input[type="checkbox"]', rows).prop('checked', this.checked);
  );

);

每次我添加 columnDef 时都会显示一个错误

图片附在上面， 检查了很多网站没有线索每次都发生相同的错误 任何帮助将不胜感激 在此先感谢........

【问题讨论】：

大概，您应该将一个对象传递给 DataTable 构造函数。对象包含在 中。例如$('#rpa_table').DataTable( columnDefs: [] )

ypeError: Cannot read property 'aDataSort' of undefined 这个错误来了

Cannot read property 'aDataSort' of undefined

【参考方案1】：

您在传递到.DataTables() 的选项周围有一些语法错误。请参阅下面的我的 cmets：

$('#rpa_table').DataTable(     // <-- Need a curly brace here
    columnDefs: [ 
        
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        
    ],
    select: 
        style: 'os',
        selector: 'td:first-child'
    ,
    order: [
        [ 1, 'asc' ]
    ],
    
        "aaData": total,
        "aoColumns": [
            
                "sTitle": "Site",
                "mData": "siteName"
            ,
            
                "sTitle": "Cabinet",
                "mData": "deviceName"
            ,
            
                "sTitle": "Count",
                "mData": "count"
                 // <-- Remove the trailing comma here
        ]         // <-- Remove the trailing comma here
                 // <-- Close the inner object here
);               // <-- Close the options object here

将选项传递给.DataTables() 时，您必须将内容作为options 对象传递。这包括在开始 parathensis 和结束 parathensis 处的开始和结束花括号。

【讨论】：

Uncaught SyntaxError: Unexpected token '',this error iscoming

@Swarnadeep 你能发布一个带有更新截图的编辑吗？我不确定那会发生在哪一行。

@War10ck：order 属性后面的大括号不是必需的，也不是右大括号。