table分页组件

最新推荐文章于 2024-07-03 11:19:28 发布

辉煌仪奇

最新推荐文章于 2024-07-03 11:19:28 发布

阅读量1.1k

点赞数 1

分类专栏：前端 JS 文章标签： js html5 javascript 前端

本文链接：https://blog.csdn.net/qq_38327141/article/details/110821949

版权

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

本文介绍了一种在前后端分离项目中实现查询分页功能的方法，通过引入CJJTable组件，展示了如何配置HTML、JavaScript代码以及如何处理数据。提供了代码示例、实际效果展示，并给出了数据格式化和前端分页的具体实现步骤。

摘要由CSDN通过智能技术生成

table分页组件

前言

前言

最近在做个一项目,前后端一起做,需要做一个查询分页的功能,于是想要找一个合适好用的js table分页组件,结果发现各种网页上面不是不好用,就是不能够使用,也可能是我级别太低用不了好多例子都没有结果.今天在一个网站上面找到了一个很好用的组件,现在分享给大家.链接在这里>>>
SCDN本地资源链接在这里

代码部分

话不多说,直接上代码

html代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>table分页组件</title>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
 
<script type="text/javascript" src="js/front-endPage.js"></script>
<script type="text/javascript" src="js/shujv2.js"></script>
<link rel="stylesheet" type="text/css" href="css/table.css">
</head>
<body>
<html>
<body>
<div id="histroyBox"></div>
<script type="text/javascript">
    //前台分页的样子
    $('#histroyBox').CJJTable({
       title:["装点","卸点","运输货物","下单日期","作者"],//thead中的标题 必填
       body:["taskCode","startAddr","endAddr","varietiesTypeName","createDate","customerName"],//tbody td 取值的字段 必填
       display:[1,1,1,1,2,1],//隐藏域，1显示，2隐藏 必填
       pageNUmber:10,//每页显示的条数 选填
       pageLength:data.length,//选填
       url:data,//数据源 必填
       operation:1,//操作单行 1操作 0不操作
       dbTrclick:function(e,ar){//双击tr事件
               alert(JSON.stringify(ar))
       },
       buttonSave:function(ar){
            alert(JSON.stringify(ar))
       },
       buttonRemove:function(ar){
            console.log(ar)
            $('#histroyBox').CJJReload();
       }
    });
    //后台分页的样子
   //  $('#histroyBox').CJJTable({
   // title:["装点","卸点","运输货物","下单日期"],//thead中的标题 必填
   // body:["taskCode","startAddr","endAddr","varietiesTypeName","createDate","customerName"],//tbody td 取值的字段 必填
   // display:[1,1,1,1,2,2],//隐藏域，1显示，2隐藏 必填
   // pageJson:{
   // taskId:528710,
   // pageSize:10,//ajax请求参数中的每页展示数量 选填
   // token:"yJUmunFeG3REqisYAmCfeA"
   // },
   // url:'http://" + "127.0.0.1:8000" + "/mysuperuser/look_list',//数据源 必填
   // operation:1,//操作单行 1操作 0不操作
   //   dbTrclick:function(e,ar){//双击tr事件
   //      alert(JSON.stringify(ar))
   //   },
   //   buttonSave:function(e){
   //      alert(JSON.stringify(e))
   //   },
   //    buttonRemove:function(ar){
   //            console.log(ar)
   //            $('#histroyBox').CJJReload();
   //    }
   // });
</script>
</body>
</html>

效果图

在这里插入图片描述

shujv2.js说明

探索了一下这个文件,发现只是用来提供测试数据的,这个文件可以不要,数据后台加载后直接给.由于我这里是前后端分离的,后端数据格式已定,于是我将还是用前段分页方式来加载,去掉了shujv2.js,将 url:data,//数据源必填里面的data换成了我整理好的数据,测试后成功,可以中途替换数据,更新等.

替换使用后测试图

在这里插入图片描述

用于项目

//获取server数据成功回调函数
function create_opts_windows(data) {

    var data = arrangement(data.d);
    console.log(data)
    pagingf(data);
}

function pagingf(data) {
        $('#histroyBox').CJJTable({
        title: ["设备ID", "经度", "纬度", "发电机电压", "动力电压", "温度", "湿度", "速度", "运动状态", "设备状态", "时间"],//thead中的标题 必填
        body: ['id', 'png', 'lat', 'dc', 'fd', 'tem', 'hum', 'speed', 'mon', 'fan', 'time'],//tbody td 取值的字段 必填
        display: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1,1],//隐藏域，1显示，2隐藏 必填
        pageNUmber: 10,//每页显示的条数 选填
        // pageLength: data.length,//选填
        url: data,//数据源 必填
        operation: 1,//操作单行 1操作 0不操作
        dbTrclick: function (e, ar) {//双击tr事件
            document.getElementById("list_id").value=ar[0]
        },
        buttonSave: function (ar) {
            alert(JSON.stringify(ar))
        },
        buttonRemove: function (ar) {
            console.log(ar)
            $('#histroyBox').CJJReload();
        }
    });
}
//数据格式化
function arrangement(data) {
    var rdata = [];
    console.log(data)
    for (var i in data) {
        rdata.push({
                'id': data[i][0],
                'png': data[i][1],
                'lat': data[i][2],
                'dc': data[i][3],
                'fd': data[i][4],
                'tem': data[i][5],
                'hum': data[i][6],
                'speed': data[i][7],
                'mon': data[i][8],
                'fan': data[i][9],
                'time': data[i][10]
            }
        )

    }
    return rdata;
}