使用命令:npm install datatables.net
安装插件

在文件中引入

import $ from 'jquery'
import 'datatables.net';

使用

            $(document).ready(function() {
              $('#myTableId').DataTable({
                paging: false, // 禁用分页样式
                searching: false, // 禁用搜索样式
                info: false, // 禁用信息样式
                language: {
                  emptyTable: "暂无数据", // 自定义空表格信息
                },
              })
            });

使用如上方法,可以让jquery tr td拼成的表格实现点击表头排序的功能

function setAreaContent(obj) {
  var content = '<table id="myTableId" style="width:100%">'
  content +=
    `<thead><tr>
      <th class = "table_head">姓名<i class="el-icon-sort"/></th>
      <th class = "table_head">卡号<i class="el-icon-sort"/></th>
      <th class = "table_head">部门<i class="el-icon-sort"/></th>
      <th class = "table_head">工种<i class="el-icon-sort"/></th>
    </tr></thead>`
   content += '<tbody>'
  for (let index = 0; index < obj.Result.length; index++) {
    const objData = obj.Result[index]
    content +=
      '<tr style="height:20px;line-height:20px"><td class="table_info" >' +
      objData.姓名 +
      '</td><td class="table_info">' +
      objData.卡号 +
      '</td><td class="table_info">' +
      objData.部门 +
      '</td><td class="table_info">' +
      objData.工种 +
      '</td></tr>'
  }
  content += '</tbody></table>'
  return content
}

写的比较乱,仅为自己记录

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐