zoukankan      html  css  js  c++  java
  • datatables简单使用

      一、引入文件

      1.下载离线包,只需要 media/ 目录下的文件

       2.引入文件,只需引用如下3个文件(顺序最好不变,jquery.js文件要在jquery.dataTables.js前面)

    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="DataTables/media/css/jquery.dataTables.css">
     
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="DataTables/media/js/jquery.js"></script>
     
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="DataTables/media/js/jquery.dataTables.js"></script>

      二、使用

      1.html部分(示例代码)

    <table id="table_id_example" class="display">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
            </tr>
            <tr>
                <td>Row 2 Data 1</td>
                <td>Row 2 Data 2</td>
            </tr>
        </tbody>
    </table>

      2.初始化databables (table标签的id属性一定要一样)

    $(document).ready( function () {
        $('#table_id_example').DataTable();
    } );

      这样就能简单体验到datatables的分页、搜索、排序功能了。

      但是有个问题是,当数据量达到上万的时候,这种前端分页已经开始变卡,数据量5万左右基本就能把页面卡死,所以数据量大的时候需要用到功能更强大的后端分页。

      附:

      datatables使用服务器端分页、排序、搜索功能(PHP)

       

  • 相关阅读:
    shenduxuexizheshinian
    apk
    clion 激活码
    mongodb配置文件
    scrapy
    基于docker/虚拟机的esp32远程工作流
    Android JNI 之 环境安装
    使用lambda编写九九乘法表
    OpenFire 的安装和配置
    跟我学android-Notification
  • 原文地址:https://www.cnblogs.com/bk233/p/7655650.html
Copyright © 2011-2022 走看看