Datatables简单的使用

来源：互联网发布：mysql count 编辑：程序博客网时间：2024/05/18 19:38

一.Datatables简介

DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：

自动分页处理
即时表格数据过滤
数据排序以及数据类型自动检测
自动处理列宽度
可通过CSS定制样式
支持隐藏列
易用
可扩展性和灵活性
国际化
动态创建表格
免费的

DataTables的官网是：http://www.datatables.net/ 中文网:http://datatables.club/

二.简单的使用

1.简单的列子

<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"><meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0"><title>基础</title><link rel="stylesheet" type="text/css" href="../jquery.dataTables.min.css"></head><body><table id="basic_example" class="display">    <thead>        <tr>            <th>学号</th>            <th>性别</th>            <th>班级</th>            <th>名称</th>            <th>身份证</th>            <th>兴趣</th>        </tr>    </thead>    <tbody>        <tr>            <td>001</td>            <td>女</td><td>初一（一）班</td><td>小屋</td><td>100001</td><td>看书</td>        </tr>        <tr>            <td>002</td>            <td>男</td><td>初一（4）班</td><td>小丫</td><td>100002</td><td>唱歌</td>        </tr>        <tr>            <td>003</td>            <td>女</td><td>初一（一）班</td><td>肖霞</td><td>100003</td><td>看书</td>        </tr>        <tr>            <td>004</td>            <td>男</td><td>初一（4）班</td><td>默默</td><td>100004</td><td>唱歌</td>        </tr>    </tbody></table><script type="text/javascript" charset="utf8" src="../jquery.js"></script><script type="text/javascript" charset="utf8" src="../jquery.dataTables.js"></script><script type="text/javascript" charset="utf8" class="init">$(document).ready(function() {$('#basic_example').dataTable();} );</script></body></html>

2.使用常用配置选项：查看选项

$('#basic_example').dataTable({//paging: false,//分页关闭  默认是打开的//scrollY: 400,//y轴启动滚动条//scrollX: 800,//x轴启动滚动条autoWidth:false,////不开启自动宽度，用bootstrap的自适应去调整"lengthMenu": [//表格行数选择框内数目，第一个数组代表value，第二个数组代表key        [2, 4, 20, 50, -1],        [2, 4, 20, 50, "All"]    ],"info": true,//页脚信息"sort": true, //排序功能"displayLength": 2,//默认的显示行数 (也就是每页显示几条数据)    "language": {//自定义语言提示        "lengthMenu": "每页 _MENU_ 条记录","zeroRecords": "没有检索到数据", //搜索，没找到内容时        "paginate": {            "previous": "上一页",            "next": "下一页"        },        "info" : "从 _START_ 到  _END_ 条，总记录为 _TOTAL_ 条",           "infoEmpty" : "记录数为0",        "search":"搜索："    }});

阅读全文

0 0