zoukankan      html  css  js  c++  java
  • jQuery Datatable 表格插件

    Datatable 总体来说很好用,可以实现即时搜索和排序。但是只能用于数据量较少的情况下,如果数据量超过1K建议还是用表格加翻页,不然会很慢。

    datatable 中文网  http://datatables.club/ 

    开始使用DataTables很简单,只需要引入两个文件, 一个css样式文件和DataTables本身的脚本文件。在DataTables CDN上,可以使用下面这两个文件:

    css   cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
    js  cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
     
    提到 CDN,这里稍微提一句,百度的CDN http://cdn.code.baidu.com/ 以及Bootstrap 的cdn 都是不错的选择 http://www.bootcdn.cn/
     
    在引入这两个文件之后,怎样简单地使用DataTables?使用下方简单的几行代码,就可以初始化table。
    $(document).ready(function(){
            $('#data_table').DataTable(); });

    其中#myTable 就是对应的  table id,如下所示

    <table id="data_table" cellpadding="0" cellspacing="0" border="0"
    class="data_table table table-striped table-bordered table-hover">
    </table>

    如果你想设置你的翻页,每页显示10个,可以加上下面这一段
    $(function () {var dataTableOption = {
           pageLength: 10,
            language: {
                paginate: {
                    previous: "上一页",
                    next: "下一页"
                }
            },
            "order": [[ 0, "desc" ]]
        };
         $("#data_table").DataTable(dataTableOption);})

    好了,现在你已经实现Datatable 了!

  • 相关阅读:
    hdu 1108 最小公倍数
    hdu 1106 排序
    hdu 1097 A hard puzzle
    hdu 1076 An Easy Task
    hdu 1064 Financial Management
    hdu 1061 Rightmost Digit
    hdu 1050 Moving Tables
    hdu 1060 Leftmost Digit
    hdu 1049 Climbing Worm
    hdu1104
  • 原文地址:https://www.cnblogs.com/DaBing0806/p/6186885.html
Copyright © 2011-2022 走看看