一个简单的制表框架 - DataTables

uvuvwevwev

怼官网的时候发现的别人写好的轮子。

DataTables 使用非常简单，只需要在前端 HTML 页面上预先定义好 <table>，之后直接实例化就可以了。

支持特性

分页显示
按列排序
简单查找

Example

Starting HTML structure...

<table id="example-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Modal</th>
    <tr>
  </thead>
  <tbody>
    <!-- default data goes here, will be flushed if `data' is -->
    <!--     provided during the instantiation of DataTable -->
    <tr>
      <td>0</td>
      <td>VisualStudio</td>
      <td>via VsVim</td>
    </tr>
    <tr>
      <td>1</td>
      <td>VS Code</td>
      <td>via VSCodeVim</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Qt Creator</td>
      <td>via builtin FakeVim</td>
    </tr>
    <tr>
      <td>3</td>
      <td>NeoVim</td>
      <td>native superset</td>
    </tr>
  </tbody>
</table>

JavaScript at bottom of page...

$(document).ready(function() {

  // 1. default init
  $("#example-table").DataTable();

  // 2. with data provided
  $("#example-table").DataTable({
    // data - could be of type Object, Array, Array of Objects etc.
    //        For more, see https://datatables.net/manual/data/#Data-source-types
    data: [
      {
        "ID": 0,
        "name": "NeoVim",
        "modality": "native superset"
      }
    ],
    // columns - map cols in data to cols in `<table>', field by field.
    //           Note: number of cols provided here must match that of cols in `<table>'
    columns: [
      { "data": "ID" },
      { "data": "name" },
      { "data": "modality" }
    ]
  });

  // 3. AJAX - https://datatables.net/manual/ajax
  $("example-table").DataTable({
    ajax: "/path/to/api"
  });

});