zoukankan      html  css  js  c++  java
  • javascript控件(二):一个好用的表格(分页实例)

    一、官网

    https://datatables.net/

    二、引用

    <script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

    三、ajax分页初始化

    1. 前端脚本部分

    $('#example2').DataTable( {
        "processing": true, //查询缓慢的时候会有一个Processing状态的提示
        "serverSide": true,
        "ajax": "tabledate/paging?myparam=HAHA", //myparam是自定义的条件
        "columns": [ //返回的数据的列设置
            { "data": "id" }, 
            { "data": "taskId" },
            { "data": "custId" },
            { "data": "tel" },
            { "data": "email" }
        ]
    } );    

    写的很简单,发出去的请求携带的参数却是这个样子:

    2. 请求实例

    myparam: HAHA //自定义的请求参数
    draw: 2 //第几次渲染动作(每跳转一次就+1)
    columns[0][data]: id
    columns[0][name]: 
    columns[0][searchable]: true
    columns[0][orderable]: true
    columns[0][search][value]: 
    columns[0][search][regex]: false
    columns[1][data]: taskId
    columns[1][name]: 
    columns[1][searchable]: true
    columns[1][orderable]: true
    columns[1][search][value]: 
    columns[1][search][regex]: false
    columns[2][data]: custId
    columns[2][name]: 
    columns[2][searchable]: true
    columns[2][orderable]: true
    columns[2][search][value]: 
    columns[2][search][regex]: false
    columns[3][data]: tel
    columns[3][name]: 
    columns[3][searchable]: true
    columns[3][orderable]: true
    columns[3][search][value]: 
    columns[3][search][regex]: false
    columns[4][data]: email
    columns[4][name]: 
    columns[4][searchable]: true
    columns[4][orderable]: true
    columns[4][search][value]: 
    columns[4][search][regex]: false
    order[0][column]: 0
    order[0][dir]: asc
    start: 10    //分页查询的起始条目
    length: 10    //分页查询的数量
    search[value]: 
    search[regex]: false
    _: 1535706555699

    2. 后端服务返回数据实例

    {
        "draw": 2, //和请求的参数保持一致
        "recordsTotal": 1500, //总的数据条数(没看出来什么用)
        "recordsFiltered": 150, //实际计算页数的数据条数(此例子的话将展示位15页)
        "data": [{ //按照请求的Length返回10条数据
            "id": 305108903,
            "taskId": 11000,
            "custId": 11006,
            "tel": "13812311006",
            "email": "11000+11006@gmail.com",
            "updateTime": "2018-08-10 13:53:13.0"
        }, {
            "id": 305108902,
            "taskId": 11000,
            "custId": 11005,
            "tel": "13812311005",
            "email": "11000+11005@gmail.com",
            "updateTime": "2018-08-10 13:53:13.0"
        }, {
            "id": 305108901,
            "taskId": 11000,
            "custId": 11004,
            "tel": "13812311004",
            "email": "11000+11004@gmail.com",
            "updateTime": "2018-08-10 13:53:13.0"
        }, {
            "id": 305108900,
            "taskId": 11000,
            "custId": 11003,
            "tel": "13812311003",
            "email": "11000+11003@gmail.com",
            "updateTime": "2018-08-10 13:53:13.0"
        }, {
            "id": 305108899,
            "taskId": 11000,
            "custId": 11002,
            "tel": "13812311002",
            "email": "11000+11002@gmail.com",
            "updateTime": "2018-08-10 13:53:13.0"
        }, {
            "id": 305108898,
            "taskId": 11000,
            "custId": 11001,
            "tel": "13812311001",
            "email": "11000+11001@gmail.com",
            "updateTime": "2018-08-10 13:53:13.0"
        }, {
            "id": 305108897,
            "taskId": 11000,
            "custId": 11009,
            "tel": "13812311000",
            "email": "11000+11009@gmail.com",
            "updateTime": "2018-08-07 11:32:49.0"
        }, {
            "id": 305108896,
            "taskId": 11000,
            "custId": 11008,
            "tel": "13812311000",
            "email": "11000+11008@gmail.com",
            "updateTime": "2018-08-07 11:32:49.0"
        }, {
            "id": 305108895,
            "taskId": 11000,
            "custId": 11007,
            "tel": "13812311000",
            "email": "11000+11007@gmail.com",
            "updateTime": "2018-08-07 11:32:49.0"
        }, {
            "id": 305108894,
            "taskId": 11000,
            "custId": 11006,
            "tel": "13812311000",
            "email": "11000+11006@gmail.com",
            "updateTime": "2018-08-07 11:32:49.0"
        }]
    }
  • 相关阅读:
    python模块--time模块
    python模块--如何相互调用自己写的模块
    Animating Views Using Scenes and Transitions
    fragment 切换
    android textview 设置text 字体
    android intent 5.1
    android EditView ime
    animation of android (4)
    animation of android (3)
    animation of android (2)
  • 原文地址:https://www.cnblogs.com/yoyotl/p/9568366.html
Copyright © 2011-2022 走看看