Jquery.DataTable合并单元格

$(function() {
    var grid = new Datatable();

    grid.init({
        src: $("#list-table"),
        onSuccess: function(grid) {},
        onError: function(grid) {},
        loadingMessage: '加载中...',
        dataTable: {
            "columns": [
   {
    "data": "id",
       "bSortable": false
   },
            {
                "data": "org_name",
                "bSortable": false,
                "sWidth":"100px"
            },
            {
                "data": "resource_name",
                "bSortable": false,
                "sWidth":"160px"
            }
            
        ],
            "columnDefs": [
     {
      "targets": [0],
      "render": function(data,type,full){
       return "<input type='checkbox' name='id' value='" + data + "' status='" + full.status+ "'/>";
      },
       "createdCell": function(cell, cellData, rowData, rowIndex, colIndex){
        var row_name = "id";
                       handleRowSpan(row_name, cell, rowData);  
               }
            
           ],
            "pageLength": 10,
            "ajax": {
                "url": ',
                'data' : function (d) {
                 d.resource_name=$('#resource_name').val();
                 d.cata_title=$('#cata_title').val();
                  },
             "dataSrc": function(res) {
               return getRowSpanData(res.data, ['id','org_name']);
              }
            },
            "order": [[0, "des"]]
        }
    });




function handleRowSpan(row_name, cell, rowData){
    if(rowData[row_name+'-row-span-num']>1){
        $(cell).attr('rowspan',rowData[row_name+'-row-span-num']);
    }
    else if(rowData[row_name+'-row-span-num']<1){
        $(cell).remove();
    }
};


function getRowSpanData(data, rowNameArr) {
    function rowSpanNum(row_name, current_row) {
        var num = 1;
        //如果与上一行的数据相同,则标记为0
        if((current_row > 0)&&(data[current_row - 1][row_name] === data[current_row][row_name])){
            num = 0;
        }
        //否则 计算共有几行重复
        else{
            var i = current_row + 1;
            while(i < data.length && (data[i][row_name] === data[current_row][row_name])){
                num++;
                i++;
            }
        }
        return num;
    }

    $.each(data,function (key, value) {
        $.each(rowNameArr, function (index, item) {
            value[item+'-row-span-num'] = rowSpanNum(item, key);
        });
    });
    return data;
};



  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
jquery.datatable是一款常用的前端表格插件,它支持前端和后端分页两种方式。在后端分页的情况下,数据请求和处理都在服务器端完成,前端只需要展示和呈现数据。 在使用jquery.datatable进行后端分页时,我们需要进行以下步骤: 1.准备后端接口:需要在服务器端提供一个接口来处理数据请求。这个接口需要接受一些参数,例如当前页码、每页显示数量等。接口会根据这些参数查询数据库,并返回相应的数据结果。 2.前端配置datatable插件:在前端页面中,需要引入jquery.datatable的相应脚本文件,并配置datatable的参数。其中,重要的参数包括ajax配置项,用于指定后端接口的URL,以及服务器端接口需要的参数。 3.发送数据请求:当用户操作表格进行翻页或者其他操作时,jquery.datatable会根据配置的ajax参数自动发送数据请求到后端接口。请求参数中包含当前页码、每页显示数量等信息。 4.服务器处理请求:后端接口接收到数据请求后,根据请求参数进行相应的查询和处理操作。可以使用数据库查询语言等方式查询数据库,并返回结果给前端。 5.前端展示数据:jquery.datatable会自动根据后端返回的数据结果,生成对应的表格展示。同时,它还提供了丰富的功能和样式配置选项,使得表格的展示更加灵活和美观。 总结来说,使用jquery.datatable进行后端分页需要准备后端接口,配置前端datatable,并进行数据请求和处理。这样就能够实现在前端页面展示由后端数据查询而来的分页表格。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白爱吃猪头肉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值