DataTables VS EasyUI DataGrid 基础应用转

Posted 2020-09-02 最初的梦想

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DataTables VS EasyUI DataGrid 基础应用转相关的知识，希望对你有一定的参考价值。

技术分享

DataTables中文网推出了第一篇关于DataTables和其他表格插件比较后，为了把让这个比较更有意义，更能帮助到大家，DataTables中文网做了问卷调查，根据小伙伴们的填写我归纳了一下，一个表格插件关注点在以下三个部分基础、高级的和进阶：

基础
- 排序
- 分页
- 搜索
- 美观
- 合理的配置
高级
- 单击和双击行事
- 选择高亮显示
- 增删改查
- 列宽拖动
- 数据导出
- 添加序号
进阶
- 支持的数据类型
- 行内编辑
- 合并单元格
- 自定义表头
- 高扩展性
- 易用的API
- 模块化

所以根据以上列出的这些功能点，DataTables中文网至少还会推出三篇文章来讲DataTables和DataGrid之间的“优劣”，从而帮助大家选出适合自己的表格插件。

由于我也是初次使用DataGrid，所以在某些方面可能还不能描述的很好，如发现文章有说得不对或者可以改进的地方，希望您还能在阅读完文章后在下方或者通过右下角的反馈发表下自己的看法。如果觉得本系列文章能帮助到小伙伴们，希望小伙伴能多多支持本站，多给DataTables中文网提建议，多宣传DataTables中文网。

说之前插播一个广告

x i

好了，我们进入正题吧。

前面一篇讲到了分别使用最简配置，使表格变得更强大，今天我们要讲的就是基础部分，对照API，Demo分别实现排序，分页，搜索，这三个基本功能。

DataTables实现排序，分页，搜索

对于DataTables，其实之前的例子中已经做完了这个步骤，因为默认就开启了这部分功能，还是直接看代码吧

和之前一样，有如下表格：

<table>
       <thead>
           <tr>
               <th>Code</th>
               <th>Name</th>
               <th>Price</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>001</td><td>name1</td><td>2323</td>
           </tr>
           <tr>
               <td>002</td><td>name2</td><td>4612</td>
           </tr>
           <tr>
               <td>003</td><td>name3</td><td>4612</td>
           </tr>
           <tr>
               <td>004</td><td>name4</td><td>4612</td>
           </tr>
           <tr>
               <td>005</td><td>name5</td><td>4612</td>
           </tr>
           <tr>
               <td>006</td><td>name6</td><td>4612</td>
           </tr>
           <tr>
               <td>007</td><td>name7</td><td>4612</td>
           </tr>
           <tr>
               <td>008</td><td>name8</td><td>4612</td>
           </tr>
           <tr>
               <td>009</td><td>name9</td><td>4612</td>
           </tr>
           <tr>
               <td>010</td><td>name10</td><td>4612</td>
           </tr>
           <tr>
               <td>011</td><td>name11</td><td>4612</td>
           </tr>
       </tbody>
</table>

第一步：引入 DataTables 的js和css

 <!--样式文件-->
 <link rel="stylesheet" type="text/css" href="plugin/datatables/jquery.dataTables.min.css">
 <!--jquery js-->
 <script src="plugin/datatables/jquery.js"></script>
 <!--DataTables 核心 js-->
 <script src="plugin/datatables/jquery.dataTables.min.js"></script>

第二步：给表格加上id

1
2
3

<table id="example" class="display">
     ……
</table>

第三步：初始化

<script>
    $(function () {
        $(‘#example‘).DataTable({
            columns:[
                {data:"firstname"},
                {data:"lastname"},
                {data:"phone"}
            ]
        });
    });
</script>

只需简单的一行代码，DataTables就会帮你把表格配备上排序，翻页，快速过滤。这次的代码比之前的要多了列配置，本次先卖个关子，后面再告诉大家为什么要这样配置？

DataGrid实现排序，分页，搜索

不多说，还是来看看DataGrid是怎么实现的。在做DataGrid的时候我花了些时间，用起来不那么熟练，遇到了许多问题，不过通过在网上搜索最终解决了问题，只是翻页还是有点小bug，需要点击下排序之后，翻页才正常，如果小伙伴你知道怎么解决希望您能告诉我

第一步：引入 EasyUI DataGrid 的js和css

 <!--核心样式文件-->
 <link rel="stylesheet" type="text/css" href="/assets/easyui/easyui.css">
 <!--图标css-->
 <link rel="stylesheet" type="text/css" href="/assets/easyui/icon.css">
 <!--颜色样式-->
 <link rel="stylesheet" type="text/css" href="/assets/easyui/color.css">
 <!--核心js-->
 <script type="text/javascript" src="/assets/easyui/jquery.easyui.min.js"></script>
 <!--开启过滤需要引入的js-->
 <script type="text/javascript" src="/assets/easyui/datagrid-filter.js"></script>

第二步：使用js代码初始化DataGrid

var dg = $(‘#dataGrid‘).datagrid({
    /**开启分页*/
    pagination: true,
     /**默认是服务器排序，这里需要手动关闭，切换为客户端排序*/
    remoteSort: false,
     /**单条选择模式*/
    singleSelect: true,
     /**配置*/
    columns: [[
        /**sortable：true 开启排序*/
        {field: ‘firstname‘, title: "first_name", sortable: true},
        {field: ‘lastname‘, title: "last_name", sortable: true},
        {field: ‘phone‘, title: "phone", sortable: true}
    ]]
});

 /**开启过滤*/
dg.datagrid(‘enableFilter‘);