$(document).ready(function() {
    $('#example').dataTable({
"sScrollX""100%",   //表格的宽度
  "sScrollXInner""110%",   //表格的内容宽度
  "bScrollCollapse"true,  //当显示的数据不足以支撑表格的默认的高度时,依然显示纵向的滚动条。(默认是false) 
"bPaginate"true,  //是否显示分页
  "bLengthChange"true,  //每页显示的记录数
  "bFilter"true//搜索栏
  "bSort"true//是否支持排序功能
  "bInfo"true//显示表格信息
  "bAutoWidth"false,  //自适应宽度
  "aaSorting": [[1, "asc"]],  //给列表排序 ,第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc
  "aoColumns": [
      null,
      null,
      {
          "bVisible"true//不可见
          "bSearchable"false//参与搜索
      },
      null,
      null
  ], //列设置,表有几列,数组就有几项
   "bStateSave"true//保存状态到cookie *************** 很重要 , 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
  "sPaginationType""full_numbers"//分页,一共两种样式,full_numbers和two_button(默认)
  "oLanguage": {
      "sLengthMenu""每页显示 _MENU_ 条记录",
      "sZeroRecords""对不起,查询不到任何相关数据",
      "sInfo""当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
      "sInfoEmtpy""找不到相关数据",
      "sInfoFiltered""数据表中共为 _MAX_ 条记录)",
      "sProcessing""正在加载中...",
      "sSearch""搜索",
      "sUrl"""//多语言配置文件,可将oLanguage的设置放在一个txt文件中,例:Javascript/datatable/dtCH.txt
      "oPaginate": {
          "sFirst":    "第一页",
          "sPrevious"" 上一页 ",
          "sNext":     " 下一页 ",
          "sLast":     " 最后一页 "
      }
  }, //多语言配置
 "bJQueryUI"false//可以添加 jqury的ui theme  需要添加css
       "aLengthMenu": [[10, 25, 50, -1, 0], ["每页10条""每页25条""每页50条""显示所有数据""不显示数据"]]  //设置每页显示记录的下拉菜单
    });
});

直接调用默认的设置

$('#example').dataTable();

Bootstrap Datatable 简单的基本配置的更多相关文章

  1. 利用表格分页显示数据的js组件bootstrap datatable的使用

    前面展示了datatable的简单使用,还可以通过bootstrap结合datatable来使用,这样可以进一步美化datatable插件 <!DOCTYPE html> <html ...

  2. 一个简单的零配置命令行HTTP服务器

    http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...

  3. 一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)

    http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...

  4. 简单几步配置gitlab

    简单几步配置gitlab 之前配置gitlab需要很多步骤,要装apache2.ruby.tomcat.mysql等一片东西.有没有更简单的方式呢?现在可以借助bitnami,简化了很多. 可以参考v ...

  5. Spring简单的文件配置

    Spring简单的文件配置 “计应134(实验班) 凌豪” 一.Spring文件配置 spring至关重要的一环就是装配,即配置文件的编写,接下来我按刚才实际过程中一步步简单讲解. 首先,要在web. ...

  6. Redhat 简单本地yum 配置

    Redhat 简单本地yum 配置 一.将redhat 系统的镜像挂载到系统上 Vmware Workstion 环境下: [虚拟机设置]--[硬件]--[CD/DVD]--[使用ISO映像文件]-- ...

  7. Spring Boot 揭秘与实战 自己实现一个简单的自动配置模块

    文章目录 1. 实战的开端 – Maven搭建 2. 参数的配置 - 属性参数类 3. 真的很简单 - 简单的服务类 4. 自动配置的核心 - 自动配置类 5. spring.factories 不要 ...

  8. Spring Boot项目简单上手+swagger配置+项目发布(可能是史上最详细的)

    Spring Boot项目简单上手+swagger配置 1.项目实践 项目结构图 项目整体分为四部分:1.source code 2.sql-mapper 3.application.properti ...

  9. maven pom文件简单模板和配置详解

    https://blog.csdn.net/earbao/article/details/49924943 maven pom文件简单模板和配置详解

随机推荐

  1. 加入收藏BUG改善

    <script type="text/javascript"> function add_favorite(a, title, url) { url = url || ...

  2. 工作总结 EF GroupBy() Select() Select() 中 Count() 分组 求总

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. ZOJ - 3471 Most Powerful (状态压缩)

    题目大意:有n种原子,两种原子相碰撞的话就会产生能量,当中的一种原子会消失. 问这n种原子能产生的能量最大是多少 解题思路:用0表示该原子还没消失.1表示该原子已经消失.那么就能够得到状态转移方程了 ...

  4. CGlib小记

    CGlib是一个强大的代码生成包.常被用于各种AOP框架,提供"拦截"功能. JDK本身就为控制要訪问的对象提供了一 种途径,动态代理Proxy. 可是被代理的累必须实现一个或多个 ...

  5. HDU 5411 CRB and puzzle (Dp + 矩阵高速幂)

    CRB and Puzzle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) T ...

  6. 音乐播放器之myeclipse项目

    音乐播放器: 这个音乐播放器是用myeclipse打开的项目.假设有问题记得改掉文件的路径名.还有假设图片不显示也可能是图片的路径名不正确,如音乐无法播放也可能是路径名不正确.总之这个游戏有文件的引用 ...

  7. Codeforces Round #311 (Div. 2)C. Arthur and Table

    C. Arthur and Table time limit per test 1 second memory limit per test 256 megabytes input standard ...

  8. Oracle利用游标返回结果集的的例子(C#)...(最爱)

    引用地址:http://www.alixixi.com/program/a/2008050727634.shtml   本例在VS2005+Oracle 92010 + WindowsXp Sp2测试 ...

  9. vue-easytable

    github地址:https://github.com/huangshuwei/vue-easytable

  10. vue seo

    最近在实习,刚来没几天,老大没安排什么大事给我,昨天下午说给我一个小任务,要求如下: 1.收集几个流量大的网站(必须是vue做的)页面交互和逻辑尽可能复杂多样2.对比一下各个页面的seo是如何做的3. ...