datatables 配套bootstrap3样式使用小结(1)

今天介绍汇总一下datatables。

网址: www.datatables.net

公司CMS内容资讯站的后台管理界面用了大量的table来管理数据,试用了之后,感觉挺不错,推荐一下。

先上一个基本的效果图.

(图片太宽了,换了另一个模板)

介绍一下这个demo的实现。

首先是引用 js+css。

js有4个,①jquery,②bootstrap3,③datatables的js,④datatables对应bootstrap样式时用的。

为了说明问题,就不放bundle里面了。

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Content/datatables/js/jquery.dataTables.js"></script>
<script src="~/Content/datatables/js/dataTables.bootstrap.js"></script>

然后是css。

有2个,①bootstrap3,②datatables对应bootstrap样式(要用这个替换datatables默认的样式,否则会出现右下角的分页样式margin很大的情况。)

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/datatables/css/dataTables.bootstrap.css" rel="stylesheet" />

下面是html

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">
            基本的datatables
        </div>
    </div>
    <div class="panel-body">
        <table id="table_local" class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>FirstName</th>
                    <th>LastName</th>
                    <th>EnrollmentDate</th>
                    <th>Discriminator</th>
                </tr>
            </thead>
            @if(Model.Count() > 0) {
                <tbody>
                    @foreach(var p in Model) {
                        <tr>
                            <td>@p.PersonID</td>
                            <td>@p.FirstName</td>
                            <td>@p.LastName</td>
                            <td>@p.EnrollmentDate.GetValueOrDefault().ToString("yyyy-MM-dd HH:mm:ss")</td>
                            <td>@p.Discriminator</td>
                        </tr>
                    }
                </tbody>
            }
        </table>
    </div>
</div>

然后是js

<script type="text/javascript">
        $(function () {
            $("#table_local").dataTable({
                //lengthMenu: [5, 10, 20, 30],//这里也可以设置分页,但是不能设置具体内容,只能是一维或二维数组的方式,所以推荐下面language里面的写法。
                paging: true,//分页
                ordering: true,//是否启用排序
                searching: true,//搜索
                language: {
                    lengthMenu: '<select class="form-control input-xsmall">' + '<option value="1">1</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                    search: '<span class="label label-success">搜索:</span>',//右上角的搜索文本,可以写html标签

                    paginate: {//分页的样式内容。
                        previous: "上一页",
                        next: "下一页",
                        first: "第一页",
                        last: "最后"
                    },

                    zeroRecords: "没有内容",//table tbody内容为空时,tbody的内容。
                    //下面三者构成了总体的左下角的内容。
                    info: "总共_PAGES_ 页,显示第_START_ 到第 _END_ ,筛选之后得到 _TOTAL_ 条,初始_MAX_ 条 ",//左下角的信息显示,大写的词为关键字。
                    infoEmpty: "0条记录",//筛选为空时左下角的显示。
                    infoFiltered: ""//筛选之后的左下角筛选提示,
                },
                paging: true,
                pagingType: "full_numbers",//分页样式的类型

            });
            $("#table_local_filter input[type=search]").css({ width: "auto" });//右上角的默认搜索文本框,不写这个就超出去了。
        });

    </script>

执行js之后,如果没有报错,那就会得到最上面的效果图。四个编号上的内容都是可以通过传入datatable()方法控制的。其中要注意,方法名是dataTable而不是DataTable,后者用于api的操作。

通过浏览器的开发者工具可以看到,四个控制块的id分别为table的id 加上 length,filter,info,paginate,所以如有需要,可以直接用js来强制控制。

编号②中的搜索框是输入内容后自动搜索表格上的所有列(当然可以通过他的api来实现搜索特定的列,比如某些隐藏列的筛选)。

图如下:

通过以上4个控制,基本可以满足大部分table列表的需求。

这样的table属于一次性加载完所有数据,然后再调用js格式化。

晚上再写用ajax异步加载数据datatable。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端儿

pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度

1191
来自专栏五毛程序员

五毛的cocos2d-x学习笔记06-处理用户交互

1462
来自专栏数据小魔方

左手用R右手Python系列之——表格数据抓取之道

在抓取数据时,很大一部分需求是抓取网页上的关系型表格。 对于表格而言,R语言和Python中都封装了表格抓取的快捷函数,R语言中XML包中的readHTMLTa...

4866
来自专栏数据的力量

职场人必备的WORD排版十大技巧

2127
来自专栏章鱼的慢慢技术路

Direct3D 11 Tutorial 1: Basics_Direct3D 11 教程1:基础

在这第一篇教程中,我们将通过介绍创建最小Direct3D应用程序所必需的元素。每一个Direct3D应用程序必需拥有这些元素才能正常地工作。这些元素包括设置窗口...

1121
来自专栏Material Design组件

Human Interface Guidelines — Text Fields

1575
来自专栏大前端开发

使用mpvue开发小程序教程(五)

在上一章节中,我们了解了组件的三个基本特性以及组件的基本使用方法。在实际的小程序开发中,我们应该以组件的思维去设计每个小程序的功能页面,对其进行合理的组件拆分,...

2032
来自专栏用户2442861的专栏

我的VS2010+VAssistX

最近越来越觉得VAssistX好用,可能是以前没有去仔细研究过吧,也可能是因为我是个快捷键控吧,不管怎样,用或不用,方便或不方便,它就是那里,一动也不动,进入...

1371
来自专栏Google Dart

AngularDart Material Design 日期选择器 顶

当用户键入日期时,将专门处理具有2位数年份的日期。 例如。7/7/77被解释为1977年7月7日,而不是77年7月7日。这个逻辑看起来是未来20年:现在(201...

1853
来自专栏更流畅、简洁的软件开发方式

【实现】表单控件的UI布局,实现方式

 一、先说一下表单控件要实现的功能吧。      1、绘制UI,包括表格(Table)的绘制,也就是TR 、TD,TR是多少行,TD是有多少列;包括子控件的控件...

3787

扫码关注云+社区

领取腾讯云代金券