网站建设资讯

NEWS

网站建设资讯

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 %}
    
    
{% endblock %}
{% block content %}


    
        
{#            
Uhost信息
#}             Uhost信息                                                                                                      主机名称                         IP地址                         价格                         可用区                         业务组                         到期时间                                                                            {% for host in uhosts %}                                              {{ host.name }}                         {{ host.ip }}                         {{ host.price }}                         {{ host.zone.name }}                         {{ host.tag }}                         {{ host.expiretime }}                                          {% endfor %}                                           
        
        
    
{% endblock %} {% block 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文件




    
    
    CMDB管理
    
    
    
    
    
    
    {% block css %}{% endblock %}


    
        {% include "common/menu.html" %}
        
            {% block content %}{% endblock %}
        
    












{% block script %}{% endblock %}

效果:

datatable插件实现分页功能

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


当前标题:datatable插件实现分页功能
网页地址:http://njwzjz.com/article/jeiedg.html