数据表initComplete无法正常工作

时间:2017-05-18 06:45:16

标签: jquery datatable

任何人都可以解释为什么它没有警告你好世界,我想澄清控制台中没有任何错误。请帮帮我如何解决此错误?如果我犯了任何语法错误或拼写错误,请向我道歉。

jQuery的:

  $('#property').dataTable( {
              "sScrollX": '100%',
              initComplete: function () {
                alert("Hello world")
              this.api().columns().every( function () {
                  var column = this;
                  var select = $('<select><option value=""></option></select>')
                      .appendTo( $(column.footer()).empty() )
                      .on( 'change', function () {
                          var val = $.fn.dataTable.util.escapeRegex(
                              $(this).val()
                          );

                          column
                              .search( val ? '^'+val+'$' : '', true, false )
                              .draw();
                      } );

                  column.data().unique().sort().each( function ( d, j ) {
                      select.append( '<option value="'+d+'">'+d+'</option>' )
                  } );
              } );
            }
          } );

HTML:

<table  class="display table dataTable table-bordered table-striped" id="property" cellspacing="0" width="100%">

    <thead>
      <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>SURNAME</th>
        <th>CASTE</th>
        <th>EXTRA</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>SURNAME</th>
        <th>CASTE</th>
        <th>EXTRA</th>
      </tr>
    </tfoot>
    <tbody>
    <tr>
      <td>1</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
    </tr>
    <tr>
      <td>2</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
    </tr>
    <tr>
      <td>3</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
    </tr>
    <tr>
      <td>4</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
    </tr>
    <tr>
      <td>5</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
    </tr>
    </tbody>

</table>

1 个答案:

答案 0 :(得分:1)

dataTables.min.js可能存在问题

代码中的所有其他内容都可以

Please include this js file

https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js

代码的工作演示:

http://jsfiddle.net/dipakthoke07/btofjkus/44/