Question

我有一张表colspan导致上述error

我的table dynamic可能会基于data

而增长

我在cdn下使用datatable

// cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js

这是演示： https://jsfiddle.net/3mazrcvL/10/

这是我的表

<table class="table table-boardered" id="examples">
      <thead>
            <tr>
                 <th>Customer Id</th>
                <th>project_name</th>
                <th>product_name</th>
                <th>quantity</th>
                <th>price</th>
            </tr>
      </thead>
<tbody>



    <tr class="sum">
        <td>9</td>
        <td></td>
        <td>first</td>
        <td>1</td>
        <td>90</td>
   </tr>


    <tr class="sum">
        <td>9</td>
        <td></td>
        <td>first</td>
        <td>1</td>
        <td>90</td>
   </tr>


    <tr class="sum">
        <td>9</td>
        <td></td>
        <td>second</td>
        <td>7</td>
        <td>3000</td>
   </tr>


    <tr class="sum">
        <td>9</td>
        <td></td>
        <td>second</td>
        <td>7</td>
        <td>3000</td>
   </tr>


    <tr class="sum">
        <td>11</td>
        <td></td>
        <td>pen</td>
        <td>2</td>
        <td>90</td>
   </tr>


    <tr class="sum">
        <td>11</td>
        <td></td>
        <td>pencil</td>
        <td>2</td>
        <td>90</td>
   </tr>

  <tr>
<td colspan="4">Total</td>
<td id="total">42540</td>
</tr>
</tbody>
</table>

js代码

  $(document).ready(function () {
        var table = $('#examples').DataTable();
        $('a.toggle-vis').on('click', function (e) {
            e.preventDefault();

            var column = table.column($(this).attr('data-column'));
            column.visible(!column.visible());
        });

        $('#examples tfoot th').each(function () {
            var title = $('#examples thead th').eq($(this).index()).text();
            $(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>');
        });
        table.columns().eq(0).each(function (colIdx) {
            $('input', table.column(colIdx).footer()).on('keyup change', function () {
                table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
            });
        });

        $('#exportAttendance222').bind('click', function (e) {

            $('#examples').tableExport({ type: 'excel', escape: 'false', bootstrap: true});
        });
    });

请提前帮助我！

Answer 1

方法1

使用数据表时，使用colspan = 4后，将3 td设为显示无

<tr>
    <td colspan="4">Total</td>
    <td style='display:none'></td>
    <td style='display:none'></td>
    <td style='display:none'></td>
    <td id="total">42540</td>
</tr>

示例：https://jsfiddle.net/3mazrcvL/18/

方法2

是通过使用tfoot

<tfoot>
    <tr>
        <td colspan="4">Total</td>
        <td id="total">42540</td>
    </tr>
</tfoot>

示例：https://jsfiddle.net/3mazrcvL/17/

方法3

创建一个空白tfoot并使用数据表

渲染tfoot

<强> HTML

<tfoot>
    <tr>
        <td colspan="4">Total</td>
        <td id="total">0.00</td>
    </tr>
</tfoot>

<强> SCRIPT

var table = $('#examples').DataTable({
                 "footerCallback": function (row, data, start, end, display) {
                    var api = this.api(), data;
                    // Remove the formatting to get integer data for summation
                    var intVal = function (i) {
                        return typeof i === 'string' ?
                                i.replace(/[$,]/g, '') * 1 :
                                typeof i === 'number' ?
                                i : 0;
                    };
                    total = api.column(4).data().reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                    }, 0);
                    $(api.column(4).footer()).html(total);
                },
    });

示例：https://jsfiddle.net/3mazrcvL/19/

colspan 4表格给出了这个错误Uncaught TypeError：无法设置属性＆＃39; _DT_CellIndex＆＃39;未定义的

1 个答案: