Question

我需要在onload of datatable时在所有行和列标题中添加复选框。

这是HTML代码

<body>
    <c:if test="${not empty table}">
  ${table}
</c:if>

</body>
<script>

    $(document).ready(function() {
        $('#sheet_0').DataTable();

        var container = $('#sheet_0');
        var rowSize = $('table#sheet_0 tr').length
        alert(rowSize);

        for (var r = 0; r < rowSize; r++) {
            $('<input />', {
                type : 'checkbox',
                id : 'cb' + id,
                value : name
            }).appendTo('tr');
        }

    });     
</script>

我已经完成了上面的复选框未加载。通过读取Xlsx文件并加载到HTML

来加载该表

使用spring我在model属性中设置了表格内容，并在html中设置了视图。

<table border="1" cellpadding="2" cellspacing="0" id="sheet_0" style="border-collapse: collapse;">
          <tr>
            <td class="td_0_1">&nbsp;</td><td class="td_0_1">&nbsp;</td><td class="td_0_1">&nbsp;</td><td class="td_0_1">&nbsp;</td><td class="td_0_1" colspan="3">Seguros Generales</td><td class="td_0_1">&nbsp;</td><td class="td_0_1">&nbsp;</td><td class="td_0_1">&nbsp;</td><td class="td_0_1">&nbsp;</td><td class="td_0_1">&nbsp;</td><td class="td_0_1" colspan="3">Seguros de Personas</td><td class="td_0_1">&nbsp;</td><td class="td_0_1">&nbsp;</td><td class="td_0_1">&nbsp;</td><td class="td_0_1" rowspan="2">Total general</td>
          </tr>
          <tr>
            <td class="td_0_2">Modalidad</td><td class="td_0_2">Ramo</td><td class="td_0_2">LBC-G</td><td class="td_0_2">CRI-G</td><td class="td_0_2">ILL-G</td><td class="td_0_2">ALI-G</td><td class="td_0_3">BIS-G</td><td class="td_0_3">FOR-G</td><td class="td_0_3">LAT-G</td><td class="td_0_2">TOT. SG</td><td class="td_0_3">BUP-P</td><td class="td_0_2">LVI-P</td><td class="td_0_2">LBC-P</td><td class="td_0_3">PRO-P</td><td class="td_0_3">NAL-P</td><td class="td_0_3">ALI-P</td><td class="td_0_3">CRDI-P</td><td class="td_0_2">TOT. SP</td>
          </tr>
          <tr>
            <td class="td_0_2">&nbsp;</td><td class="td_0_2">&nbsp;</td><td class="td_0_2">&nbsp;</td><td class="td_0_2">&nbsp;</td><td class="td_0_2">&nbsp;</td><td class="td_0_2">&nbsp;</td><td class="td_0_3">&nbsp;</td><td class="td_0_3">&nbsp;</td><td class="td_0_3">&nbsp;</td><td class="td_0_2">&nbsp;</td><td class="td_0_3">&nbsp;</td><td class="td_0_2">&nbsp;</td><td class="td_0_2">&nbsp;</td><td class="td_0_3">&nbsp;</td><td class="td_0_3">&nbsp;</td><td class="td_0_3">&nbsp;</td><td class="td_0_3">&nbsp;</td><td class="td_0_2">&nbsp;</td><td class="td_0_2">&nbsp;</td>
          </tr>
          <tr>
            <td class="td_0_2">Seguros Generales</td><td class="td_0_2">Incendio</td><td class="td_0_3">0.0</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">0.0</td><td class="td_0_3">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_2">-</td><td class="td_0_2">0.0</td>
          </tr>
          <tr>
            <td class="td_0_2">&nbsp;</td><td class="td_0_2">Robo</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_2">-</td><td class="td_0_3">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_2">-</td><td class="td_0_2">-</td>
          </tr>
          <tr>
            <td class="td_0_2">&nbsp;</td><td class="td_0_2">Transportes</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_2">-</td><td class="td_0_3">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_2">-</td><td class="td_0_2">-</td>
          </tr>
          <tr>
<table>

Answer 1

根据我在jsfiddle的尝试，试试这个：

$(document).ready(function() {
    $('#sheet_0').DataTable();
    var id = 0;

    //Look for the table and tbody to find all table rows ('tr')
   $('table#sheet_0 tbody tr').each(function()
   {
     //Take each founded table row to look for columns ('td')
     $(this).find('td:first').each(function()
     {
        //Take each founded column and append a checkbox
        $('<input />', {
            type : 'checkbox',
            id : 'cb' + id,
            value : name
        }).appendTo($(this));
        id++;
     });
   });
});

此代码示例向第一列添加了一个复选框。

以上示例为ondinary html表，没有标签：

$(document).ready(function()
{
    $('#sheet_0').DataTable();
    var id = 0;
    var tableRows =  $('table#sheet_0 tr');

    for (i = 0; i < $(tableRows).length; i++)
    {
      //Skip first table row
      if (i > 0)
      {
        //Take each founded table row to look for columns ('td')
        $(tableRows).get(id).find('td:first').each(function()
        {
            //Take each founded column and append a checkbox
            $('<input />', {
               type : 'checkbox',
               id : 'cb' + id,
               value : name
            }).appendTo($(this));
            id++;
        });
      }
   }
});

Answer 2

为此，您需要为数据表初始化添加回调：

var options = [];
options.drawCallback = function(stgs){
   //you can loop all table with foreach loop if you won't loop replace $(this)
$(this).find("td:first-child").html("<input type='checkbox'  value='sth' />");
};
$("#table_id").DataTable(options);

Answer 3

您可以将Checkboxes插件用于jQuery DataTables。

例如：

var table = $('#example').DataTable({
   'columnDefs': [
      {
         'targets': 0,
         'checkboxes': true
      }
   ],
   'order': [[1, 'asc']]
});

请参阅Checkboxes插件页面和this example以获取代码和演示。

如何使用Datatables在页面上加载时为所有行和列动态添加复选框？

3 个答案: