Bootstrap Datatable 简单的基本配置

转载 2016年06月01日 11:39:48
$(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详解

$('#scenerytable').dataTable({ "sDom": "r>>", "bProcessing": true,//显示正...

Bootstrap的datatable控件

Datatable控件使用非常简单,页面效果如下 首先,添加datatable控件的引用。@*table控件*@ ...

Bootstrap Datatable 简单的基本配置

$(document).ready(function() {     $('#example').dataTable({ "sScrollX": "100%",  ...
  • mrandy
  • mrandy
  • 2016年09月20日 22:48
  • 6553

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

bootstrap datatable使用详解

bootstrap框架中的datatable的使用,第一次使用该控件,由于对web知识了解甚少, 很多东西见解不够深,望大家莫取笑。 var table = null; $(document)....

如何使用bootStrap中的dataTable插件

本文总结下bootStrap中的dataTable插件的使用方法,以供初学者学。 我引用dataTable制作的表格效果如下: 首先说下为什么使用插件,插件可以帮助我们快速开发,同时适合初学者...

基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

前言基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页、模糊查询,页面异步刷新。说明:sp:message标签是使用了SpringMVC国际化效果DataTable...
  • cyh1111
  • cyh1111
  • 2016年10月28日 23:56
  • 8420

Bootstrap-Table实现从服务器加载数据进行显示

Bootstrap-Table是一个Boostrap的表格插件,能够将JSON数据直接显示在表格中。当然,这需要配置一些参数并进行初始化表格才行。其官方网站地址为:http://bootstrap-t...

bootstrap datatable 数据刷新问题

在项目中,页面初始化的时候,通过通过向后台请求数据,页面初始化完之后,datatable是有数据的,当我点击页面的搜索按钮(按照时间过滤数据),datatable的数据要能重新刷新或者重载;这一点,我...

bootstrap-table-editable 小结

先贴一个json类 using System; using System.Collections.Generic; using System.Web; using System.Web.Script....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap Datatable 简单的基本配置
举报原因:
原因补充:

(最多只允许输入30个字)