Question

所以我从datatable这个脚本在每一列上显示input box ..

var admin_table = $('#user_list').DataTable({

    ajax:{
        "url":"../functions/ajax/get_userlist.php",
        dataSrc:""
    },
    "columns": [
        {"data": "userfullname"},
        {"data": "address"},
        {"data": "barangay"},

    ]
});

但我的问题是当我使用它时input box重叠我的表头我想要实现的是将input box放到每一列的第一行..

$('#user_list thead th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

admin_table.columns().every( function () {
        var that = this;

        $( 'input', this.header() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );

这是我的HTML代码

<table id="user_list" class="table table-bordered" style="width: 100%">

   <thead>
           <tr>

               <th>User Fullname</th>
               <th>Address</th>
               <th>Barangay</th>

           </tr>
      </thead>

</table>

Answer 1

尝试添加绘图回调以在每次更新时更改表，您尝试在加载表之前添加字段：

var admin_table = $('#user_list').DataTable({

    ajax:{
        "url":"../functions/ajax/get_userlist.php",
        dataSrc:""
    },
    "columns": [
        {"data": "userfullname"},
        {"data": "address"},
        {"data": "barangay"},

    ],
    "drawCallback": function( settings ) {
        $('#user_list tr:first td').each( function () {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
       });
    }
});

您还可以使用datatables events在表格绘制后添加字段。

在每列的第1行显示输入框

1 个答案: