datatables和bootstrap

bootstrap是对HTML的表格做简单的样式设置，可以改变行宽行高和背景颜色。bootstrap的主要作用是在于原色的排版且可以自适应屏幕大小。而datatables更专注于给表格增加一些衍生功能，如翻页，搜索和排序。它整合了bootstrap对于表格的操作。

datatables注重dom的理解与操作，因为功能插件都是根据dom来定位添加

使用步骤：

1 导入js和css的包，2 初始化

$(document).ready( function () {
    $('#table_id_example').DataTable();
} );
dom是什么？

dom是元素，在datatables里，dom代表这张表格的各个部分，如分页框，搜索框，表格主体内容等。常用的dom元素

• l - Length changing 每页显示多少条数据选项
• f - Filtering input 搜索框
• t - The Table 表格
• i - Information 表格信息
• p - Pagination 分页按钮

使用自定义具有这些功能dom元素的添加或删除

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

"dom": 'tf'//此时的表格只有搜索框这个功能

});
} );

如果dom设置为空，t都没有，但它也会显示表格

dom的显示位置：左上，右上，表格，左下，右下

自定义这些元素的样式

使用

• <"#id" and > - div with an id 指定id的div元素
• <"class" and > - div with a class 指定样式名的div元素