datatable插件实现分页功能

1、下载datatable插件，下载地址：http://www.datatables.club/

2、安装方法：http://www.datatables.club/manual/install.html

注意：按照官方文档的方法引入插件后会有点问题，样式也不是很美观，所以我做了修改。

由于通常djangotemplate 下的html文件使用了模板语法，所以要把CSS、JS文件放在对应的模板标签下面

下面是我的一个样例：

注意：table的id要改成“dataTables”，样式会好看一些。

id="dataTables"

DataTable_Test.html

{% extends 'common/base.html' %}
{% block css %}<link rel="stylesheet" type="text/css" href="/static/DataTables-1.10.15/media/css/jquery.dataTables.css"><link rel="stylesheet" type="text/css" href="/static/DataTables-1.10.15/media/css/dataTables.bootstrap.min.css">
{% endblock %}
{% block content %}<div class="row"><div class="ibox"><div class="ibox-title">
{#            <h5>Uhost信息</h5>#}<h5 style="font-size: large">Uhost信息</h5><div class="ibox-content"><div class="row"><table id="dataTables" class="table table-striped table-hover"><thead><tr><th class="col-lg-2">主机名称</th><th class="col-lg-2">IP地址</th><th class="col-lg-2">价格</th><th class="col-lg-2">可用区</th><th class="col-lg-2">业务组</th><th class="col-lg-2">到期时间</th></tr></thead><tbody>{% for host in uhosts %}<tr><td>{{ host.name }}</td><td>{{ host.ip }}</td><td>{{ host.price }}</td><td>{{ host.zone.name }}</td><td>{{ host.tag }}</td><td>{{ host.expiretime }}</td></tr>{% endfor %}</tbody></table></div></div></div></div>
</div>
{% endblock %}{% block script %}<script type="text/javascript" charset="utf8" src="/static/DataTables-1.10.15/media/js/jquery.dataTables.js"></script><!-- 由于base.html文件中引入了jquery.js文件所以这里要注释掉，否则可能引起函数方法冲突 --><!-- <script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.js"></script> --><script type="text/javascript" charset="utf8" src="/static/DataTables-1.10.15/media/js/dataTables.bootstrap.min.js"></script><script type="text/javascript" src="/static/js/datatable_custom.js"></script>
{% endblock %}

datatable_custom.js是为了样式好看，自定义样式的一个js文件，内容如下：

/*** Created by cengchengpeng on 2018/1/10.*/
$(document).ready(function () {$('#dataTables').DataTable({language: {"sProcessing": "处理中...","sLengthMenu": "显示 _MENU_ 项结果","sZeroRecords": "没有匹配结果","sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项","sInfoEmpty": "显示第 0 至 0 项结果，共 0 项","sInfoFiltered": "(由 _MAX_ 项结果过滤)","sInfoPostFix": "","sSearch": "搜索:","sUrl": "","sEmptyTable": "表中数据为空","sLoadingRecords": "载入中...","sInfoThousands": ",","oPaginate": {"sFirst": "首页","sPrevious": "上页","sNext": "下页","sLast": "末页"},"oAria": {"sSortAscending": ": 以升序排列此列","sSortDescending": ": 以降序排列此列"}}});
});

base.html文件

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CMDB管理</title><link rel="icon" href="/static/images/bitbug_favicon.ico"><link href="/static/inspinia/css/bootstrap.min.css" rel="stylesheet"><link href="/static/inspinia/font-awesome/css/font-awesome.css" rel="stylesheet"><link href="/static/inspinia/css/animate.css" rel="stylesheet"><link href="/static/inspinia/css/style.css" rel="stylesheet"><link href="/static/css/css.css?v={{ verion }}" rel="stylesheet">{% block css %}{% endblock %}
</head>
<body><div id="wrapper">{% include "common/menu.html" %}<div id="page-wrapper" class="white-bg dashbard-1">{% block content %}{% endblock %}</div></div>
</body>
<script src="/static/inspinia/js/jquery-2.1.1.js"></script>
<script src="/static/inspinia/js/bootstrap.min.js"></script>
<script src="/static/inspinia/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/static/inspinia/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/static/inspinia/js/inspinia.js"></script>
<script src="/static/inspinia/js/plugins/pace/pace.min.js"></script>
<script src="/static/inspinia/js/bootstrap-typeahead.js"></script>
<script src="/static/js/jquery.numeric.js"></script>
<script src="/static/js/common.js?v={{ verion }}"></script>
<!--<script src="/static/js/workflow.js?v={{ verion }}"></script>-->
<script>$('#side-menu').find('li>a[href]').each(function(){if(location.href.indexOf($(this).attr('href').toLowerCase()) != -1){$(this).closest('li').addClass('active');}});$('#foldPage').click(function(){var fold = $(this).data('fold');var $div = $('#accordion div[id]');if(fold == "0"){$div.addClass('in').removeAttr('style');$(this).data('fold', 1);}else{$div.removeClass('in');$(this).data('fold', 0);}});
</script>
{% block script %}{% endblock %}
</html>

效果：

每页显示多少行结果也可以通过修改js文件来调整

转载于:https://blog.51cto.com/zengestudy/2059909

datatable插件实现分页功能相关推荐

spring boot+mybatis+thymeleaf+pagehelper分页插件实现分页功能
文章目录前言正文业务场景后端 pom.xml application.yml 实体类video.java和User.java----映射VideoMapper.xml----VideoMapp ...
element ui +mybatisPlus分页插件实现分页功能
elementui pagination插件当然这里的依赖部分就需要去创库ctrl+v了 <!--分页部分 pagination插件 @current-change="handlep ...
分页功能的实现代码与分页查询
数据库sql语句分页查询: 1. SELECT (列名) FROM (表名) LIMIT (当前页数 - 1)* 每页几条数据,每页几条数据列如:是第一页每显示 5条数据查询的表名 japan ...
mybatis-generator 插件扩展，生成支持多种数据库的分页功能
2019独角兽企业重金招聘Python工程师标准>>> 背景: 在使用mybatis的过程中,考虑到整合的框架在后期使用的过程中,有可能是需要兼容到多种数据库的,在这种前提条件下,完 ...
jPList – 实现灵活排序和分页功能的 jQuery 插件
jPList 是一个灵活的 jQuery 插件,可以用于任何 HTML 结构的排序,分页和筛选.它支持的数据源包括:PHP + MySQL,ASP.NET + SQL Server,PHP + SQL ...
Mybatis分页功能 pagehelper插件
Mybatis分页功能 pagehelper插件创建数据数据 use ssm; create table student (id int auto_incrementprimary key,name ...
简单分页，无需插件实现上一页|下一页分页功能
分页功能五花八门,插件的使用也很方便.最近做项目,分页功能是写好的了,利用bootstarp 简单实现的, 类似于这种但由于数据越来越多,这种循环的方式很不好看.于是想到上一页| 下一页分页的 ...
使用dataTable完成客户端分页
什么是dataTable dataTable是一个分页插件,可以使用客户端分页(一次性拉去所有数据,在客户端进行分页操作,适用于数据较少的情况,或者偷懒的时候用?)也可以使用服务端分页(每显示一页就拉 ...
ASP.NET中利用DataGrid的自定义分页功能和存储过程结合实现高效分页
关键字:DataGrid.存储过程.分页出自: http://blog.csdn.net/yzx110/archive/2004/08/18/78525.aspx 摘要:在最进的一个项目中因为一个管 ...
[置顶] 分步实现具有分页功能的自定义DataList控件【附源代码】
一.控件也是类 [效果] [操作步骤] 1. 新建网站Web 2. 添加类CustomDataList.cs(系统会提示你把类建在App_Code文件夹中),代码如下: using System; ...

datatable插件实现分页功能

datatable插件实现分页功能相关推荐

最新文章

热门文章