使用datatables实现自定义记录块

#前端 #datatables

代码如下：

<div class="container-fluid">
      <div class="row  mb-3 p-2">
        <div class="col-12">
          <div class="card shadow mb-3">
            <div class="card-header">datatables 看板模式</div>
            <div class="card-body">
              <h5 class="card-title">使用看板模式展示datatables</h5>
              <p class="card-text"></p>
              <table id="dt" class="table w-100">
                <thead>
                  <tr></tr>
                </thead>
              </table>
            </div>
          </div>
          </div>
        </div>
      </div>
    </div>

脚本如下：

      function createTable() {
        $("#dt thead").hide();
        dt = $("#dt").DataTable({
          ajax: "http://localhost:8888/user",
          bInfo: false, // 禁止分页: 否
          pageLength: -1,
          lengthChange: false,
          deferRender: true,
          processing: true,
          order: [[0,"desc"]], // 设置target为0的倒序排序
          language: {
            paginate: {
              previous: "<",
              next: ">",
            },
          },
          columns: [
            {
              render: function (data, type, row, meta) {
                var html =
                  '<div class="card border-light" style="width:10rem;height:10rem;background-color:#EBF5FB;">' +
                  '<div class="card-body p-2">' +
                  '<h6 class="card-title"><i class="fa fa-server" aria-hidden="true"></i>Name : ' +
                  row.name +
                  "</h5>" +
                  '<div class="card-text">Kontak : ' +
                  row.phone +
                  "</div>" +
                  '<div class="card-text" style="font-size:10px">Time=' +
                  row.mytime +
                  "</div>" +
                  "</div>" +
                  "</div>";
                return html;
              },
            },
            {
              data: "name",
              visible: false,
            },
            {
              data: "phone",
              visible: false,
              target: 0, // 设置target为0
            }
          ],
        });

        dt.on("draw", function (data) {
          $("#dt tbody").addClass("row");
          $("#dt tbody tr td").addClass("p-1");
          //$("#dt tbody tr").addClass("col-lg-2 col-md-4 col-sm-12");
        });

        $("#dt tbody").on("click", "tr", function () {
          var data = dt.row(this).data();
          //alert(data.name);
          window.open("./page/do/" + data.name);
        });

自定义定时刷新功能

timeouts.push(setTimeout("refreshTable()", 10000)); //注十秒刷新数据