Question

我是Javascript的初学者，所以如果我要问一个非常基本的问题，请原谅我。由于我需要日期选择器，因此我目前正在尝试根据在https://coderexample.com/?s=datatable&submit=Go上找到的示例将Datatables.js应用于我的jsp代码。

但是，该示例使用php加载数据，对我来说，我希望基于下表中列出的数据进行加载。另外，我希望在初始化时设置过滤器。例如，将城市默认设置为东京，我可能会使用下拉列表在选项之间进行切换。

有人可以提供一些有关如何进行初始化的帮助吗？

<table id="employee-grid"  class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Employee name</th>
                    <th>Salary</th>
                    <th>Position</th>
                    <th>City</th>
                    <th>Extension</th>
                    <th>Joining date</th>
                    <th>Age</th>
                </tr>
            </thead>
            <thead>
                <tr>
                    <td><input type="text" id="0"  class="employee-search-input"></td>
                    <td><input type="text" id="1" class="employee-search-input"></td>
                    <td><input type="text" id="2" class="employee-search-input" ></td>
                    <td><input type="text" id="3" class="employee-search-input" ></td>
                    <td><input type="text" id="4" class="employee-search-input" ></td>
                    <td  valign="middle"><input  readonly="readonly" type="text" id="5" class="employee-search-input datepicker" ></td>
                    <td><input type="text" id="6" class="employee-search-input" ></td>
                </tr>
            </thead>
       <tbody>
          <tr>
            <td>Airi Satou</td>
            <td>162700</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>5407</td>
            <td>2008-11-27</td>
            <td>33</td>
        </tr>
        <tr>
            <td>Angelica Ramos</td>
            <td>1200000</td>
            <td>Chief Executive Officer (CEO)</td>
            <td>London</td>
            <td>5797</td>
            <td>2009-10-08</td>
            <td>47</td>
        </tr>         
  </tbody>

JS代码

 $(document).ready(function() {

var dataTable =  $('#employee-grid').DataTable( {
processing: true,
serverSide: true,
ajax: "employee-grid-data.php", // json datasource

//Thinking that I would need to change something here, but not sure what to 
  do exactly

 } );

$("#employee-grid_filter").css("display","none");  // hiding global search box

$('.employee-search-input').on( 'keyup click change', function () {
    var i =$(this).attr('id');  // getting column index
    var v =$(this).val();  // getting search input value
    dataTable.columns(i).search(v).draw();
} );

 $( ".datepicker" ).datepicker({
    dateFormat: "yy-mm-dd",
    showOn: "button",
    showAnim: 'slideDown',
    showButtonPanel: true ,
    autoSize: true,
    buttonImage: "//jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date",
    closeText: "Clear"
});
$(document).on("click", ".ui-datepicker-close", function(){
    $('.datepicker').val("");
    dataTable.columns(5).search("").draw();
});
});

非常感谢您！

Answer 1

以此开始

var dataTable =  $('#employee-grid').DataTable({});

这本身将为您初始化数据表并格式化表中已有的数据。

尝试使用html的方式，但如果仍然无法使用，请使用这些自定义选项删除第二个标头，确保有一种更好的方法来设置该部分，但现在，使数据表正常工作，此解决方案中发布的init起作用

here is a link on how to add custom toolbar elements

表的Datatable.js初始化

1 个答案: