DataTables+H-ui-admin快速应用--shawemou

迷南。 2022-05-13 22:22 253阅读 0赞

h-ui页面的图标文字  
![h-ui页面的图标文字][h-ui]

点击一个按钮事件 —> h-ui页面新建一个tab

遇到一个错误:Uncaught TypeError: Cannot read property ‘targets’ of undefined—>差点没搞死我,让我重新换了前端页面日—->可能出现的问题:

{
                //访问人身份证号码
                "render" : function(data, type, row) {
                    return data;
                },
                "targets" : 3
            },
            , ==========//错误在这========
            {
                //认证结构
                "render" : function(data, type, row) {
                    return data;
                },
                "targets" : 4
            },

页面:
    <table id="user_list" class="table table-border table-bordered table-bg table-hover table-sort"> <thead> <tr class="text-c"> <th width="100">银行名称</th> <th width="100">处理总数量</th> <th width="90">认证一致数量</th> <th width="150">成功占比(%)</th> </tr> </thead> </table> 引入dataTables: <script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script> JS $("#user_search").click(function() { 
                param["parenttype"] = encodeURI($("#parenttype").val());
                param["typeGuid"] = $("#typeGuid").val();
                mytable.ajax.reload();
            })
    
            myStart();
            function myStart() { 
                mytable = $('.table-sort')
                        .DataTable(
                                {
                                    "searching" : true,
                                    "ajax" : { //ajax方式向后台发送请求
                                        "type" : "POST",
                                        "url" : "/CompareServer/web/rateList1.do",
                                        "data" : function(d) { 
                                            d.parenttype = param.parenttype;
                                            d.typeGuid = param.typeGuid;
                                        },//传递的数据
                                        "dataType" : "json",
                                        "async" : false,
                                        "dataSrc" : "aaData"//dataSrc可以是一个函数,接受一个参数,为后台传递过来的参数,然后最终要将分表的data返回回去
                                    },
                                    //开启表格分页
                                    "paging" : true,
                                    "bProcessing" : true,
                                    "bServerSide" : true,//这里是开启服务器分页,一定要写true
                                    //rowId: 'staffId'//可以在data中的属性赋值给每列的tr的id值
                                    "bAutoWidth" : false,
                                    "deferRender" : true,//延迟渲染
                                    "iDisplayLength" : 10,
                                    "iDisplayStart" : 0,
                                    "Language" : { // 国际化配置
                                        "sProcessing" : "正在获取数据，请稍后...",
                                        "sLengthMenu" : "显示 _MENU_ 条",
                                        "sZeroRecords" : "没有找到数据",
                                        "sInfo" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条",
                                        "sInfoEmpty" : "记录数为0",
                                        "sInfoFiltered" : "(全部记录数 _MAX_ 条)",
                                        "sInfoPostFix" : "",
                                        "sSearch" : "查询",
                                        "sUrl" : "",
                                        "oPaginate" : {
                                            "sFirst" : "第一页",
                                            "sPrevious" : "上一页",
                                            "sNext" : "下一页",
                                            "sLast" : "最后一页"
                                        }
                                    },
                                    //渲染
                                    "columnDefs" : [{
                                                "visible" : false,
                                                "targets" : 0
                                            },
                                            {
                                                //机构名称
                                                "render" : function(data, type, row) { 
                                                    return allType[data] == null ? "" : allType[data];
                                                },
                                                "targets" : 0
                                            },
                                            {
                                                //处理总数量
                                                "render" : function(data, type, row) { 
                                                    return data==null?0:data;
                                                },
                                                "targets" : 1
                                            },
                                            {
                                                //认证一致数量
                                                "render" : function(data, type, row) { 
                                                    return data==null?0:data;
                                                },
                                                "targets" : 2
                                            },
                                            {
                                                //成功占比
                                                "render" : function(data, type, row) { 
                                                    return (row.rightCount/row.totalCount*100+"").substring(0,5)+"%";
                                                },
                                                "targets" : 3
                                            },
                                            {
                                                //编辑
                                                "render" : function(data, type, row) { 
                                                    return "<a style='text-decoration:none' name='edit' row='"+ JSON.stringify(row)+ "' class='ml-5' onclick='gotoEdit(this)' href='javascript:;' title='编辑'><i class='Hui-iconfont'></i></a>"
                                                },
                                                "targets" : 10
                                            } ],
                                    columns : [ {
                                        data : 'typeId'
                                    }, {
                                        data : 'totalCount'
                                    }, {
                                        data : 'rightCount'
                                    }, {
                                        data : 'rightCount'
                                    }],
                                    //ininComplete回调函数中的json就是最原始的返回数据,可以在这获取,注意:这个是在第一次建表的时候才会触发,如果使用xxxTables.ajax.reload()是不会触发的,回调函数中含有setttings参数的,都可以找到原生的数据settings.json
                                        "initComplete" : function(settings, json) { 
                                        $("#checkRecord span").eq(0).html(
                                                json.totalCount);
                                        $("#checkRecord span").eq(1).html(
                                                json.throughtCount);
                                    },
                                    //即使是xxxTables.ajax.reload()函数也会回调此函数
                                    "drawCallback" : function(settings) { 
                                        var api = this.api();
                                        // Output the data for the visible rows to the browser's console
                                        console.log(api);
                                    }
                                });
            }
    
    
    后台服务端
        接受参数:
         start;
         length;
        返回值:
    map.put("aaData", page.getData());
    map.put("iTotalRecords", page.getItemCount());
    map.put("iTotalDisplayRecords", page.getItemCount());

[h-ui]: /images/20220514/463608e230a04063907c5d670051975b.png