$(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. MAVEN项目模块化

    maven的最大的特点之中的一个就是能够把项目模块化. 前面的一篇文章MAVEN创建并打包web项目已经创建了一个简单的webapp,注意这个webapp的打包方式是war. 假设如今又要划分出来一个 ...

  2. react 项目实战(三)表单验证

    我们需要记录每一个字段当前的有效状态,有效时隐藏错误信息,无效时显示错误信息. 而这个有效/无效,可以在表单值改变的时候进行判断. 我们对/src/pages/UserAdd.js进行修改: 首先修改 ...

  3. 转:js点击事件在ios中失效的3种解决方案

    ios中不允许将点击事件绑定在document或者body上,如果绑定上的话将会失效.解决方案: 例如:  $(document).on('click', '#generate', function ...

  4. android菜鸟之路-事件分发机制总结(二)

    ViewGroup事件分发机制 自己定义一个LinearLayout,ImageView和Button,小二,上代码 <LinearLayout xmlns:android="http ...

  5. go12---interface

    package main /* 接口interface 接口是一个或多个方法签名的集合 只要某个类型拥有该接口的所有方法签名,即算实现该接口,无需显示 声明实现了哪个接口,这称为 Structural ...

  6. Java IO 输入输出流 详解 (一)***

    首先看个图: 这是Javaio 比较基本的一些处理流,除此之外我们还会提到一些比较深入的基于io的处理类,比如console类,SteamTokenzier,Externalizable接口,Seri ...

  7. openstack network:dhcp binding fail

  8. Avito Code Challenge 2018 A~E

    A. Antipalindrome 还以为是什么神dp结果就是分情况讨论啊 原串是一串一样的字符的话输出0,是回文串的话输出n-1,否则直接输出原串长度 #include<iostream> ...

  9. bzoj 1571: [Usaco2009 Open]滑雪课Ski【dp】

    参考:https://blog.csdn.net/cgh_andy/article/details/52506738 没有get到什么重点的dp--做的莫名其妙 注意滑雪一个坡可以滑很多次 设f[i] ...

  10. layui 动态左树导航栏显示样式BUG规避

    先看问题现象: 使用 layui 的左树功能,先在html页面添加左树功能引入 <ul class="layui-nav layui-nav-tree layui-nav-side&q ...