数据表返回索引列

Question

我使用数据表来显示来自控制器的数据（我使用Codeigniter）并且需要在左表列上显示数字列。

我试过了：

＆＃13;

＆＃13;

$(document).ready(function() {
	$('#booking_table').dataTable( {
        processing: true,
        serverSide: true,
        language: dt_lang,
        pagingType: "simple",
        dom: 't<"col-sm-3 text-left"l><"col-sm-3"i><"col-sm-2"r><"col-sm-4 text-right"p>',
        autoWidth : true,
        ajax: {
            "url"  : base_url+"book/ajax_history",
            "type" : "POST",
            data   : function (d){
            	d.show_filter = $('#_show_filter').val();
            	d.view_type = $('#_view_type').val();
            }
        },
        columns: [
            {
              data : "b.booking_id",
              visible : false,
            },
            { data :  null}, //where i should put index number
			{ data : 'b.booking_date', className : "hidden-xs"},
			{ data : 'b.from_name', className : "hidden-xs"},
			{ data : 'b.to_name'},
        ],
        responsive: false
    });

	// reference the table in a variable
	var table = $('#booking_table').DataTable();

    table.on( 'order.dt search.dt', function () {
        table.column(0, {
            search:'applied',
            order:'applied'
        }).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();

＆＃13;

＆＃13;

＆＃13;

我的表：

＆＃13;

＆＃13;

 <table class="table table-condensed" id="booking_table">
                        <thead>
                            <tr>
                                <th class="hidden-xs">id</th>
                                <th>No</th>
                                <th class="hidden-xs">
                                    Tanggal
                                </th>
                                <th class="hidden-xs">
                                    Pengirim
                                </th>
                                <th>
                                    Penerima
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>

＆＃13;

＆＃13;

＆＃13;

请参阅此https://www.datatables.net/examples/api/counter_columns.html

但是，它没有用。我做错了什么？

Answer 1

请尝试下面提到的解决方案。希望这会帮助你。实际上你初始化了两次数据表。

$(document).ready(function() {
    var table = $('#booking_table').dataTable({
        processing: true,
        serverSide: true,
        language: dt_lang,
        pagingType: "simple",
        dom: 't<"col-sm-3 text-left"l><"col-sm-3"i><"col-sm-2"r><"col-sm-4 text-right"p>',
        autoWidth: true,
        ajax: {
            "url": base_url + "book/ajax_history",
            "type": "POST",
            data: function(d) {
                d.show_filter = $('#_show_filter').val();
                d.view_type = $('#_view_type').val();
            }
        },
        columns: [{
                data: "b.booking_id",
                visible: false,
            },
            {
                data: null
            }, //where i should put index number
            {
                data: 'b.booking_date',
                className: "hidden-xs"
            },
            {
                data: 'b.from_name',
                className: "hidden-xs"
            },
            {
                data: 'b.to_name'
            },
        ],
        responsive: false
    });

    table.on('order.dt search.dt', function() {
        table.column(0, {
            search: 'applied',
            order: 'applied'
        }).nodes().each(function(cell, i) {
            cell.innerHTML = i + 1;
        });
    }).draw();
});