基于JQuery可拖动列表格插件DataTables的踩坑记

前言

最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件。

在查找使用方法的过程中发现可用案例并不多，且大多言语不详。本文将全面介绍此插件的使用过程。

如果不是有拖动列调整列位置顺序的需求，建议不要使用此插件，坑点较多。后面有时间我会写一个名为Bootstrap-table表格插件的使用方法，使用起来比这个插件强多了

正文

英文官网：https://datatables.net/

中文官网：http://www.datatables.club/

建议多多参考英文官网中reference(参考)https://datatables.net/reference/index和中文官网中的文档http://www.datatables.club/reference

下载文件时尽量不要在中文官网下载，因为下载不到需要的表格的其他插件，英文官网下载地址：https://datatables.net/download/index

下载方式就是选择，Bootstrap，JQuery，DataTables，以及下面插件中ColReorder（此插件是拖动列所需的），在此只是提议，如何下载诸君自选

服务器分页方式

注意，本文只介绍服务器分页方式，因为客户端分页方式很简单，创建表格时写上必要的参数，然后把数据传入表格就完成了

DataTables是基于JQuery和Bootstrap的，所以在使用此插件前需引入这两个库（框架）所需的文件

引入在其他地方下载后的JQuery和Bootstrap及在DataTables官网下载的文件

html代码如下：

<table class="table table-striped display table-bordered" style="margin: 0;" cellspacing="0" width="100%" id="table"></table>

本网刊登的文章均仅代表作者个人观点，并不代表本网立场。文中的论述和观点，敬请读者注意判断。

本文地址：http://www.xlkjgs.com/notes/js/1753.html