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

h-ui页面的图标文字

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

    var bStop = false , 
    bStopIndex = 0, href = "custom/custom-main.html?"+ customDetail.customId, 
    topWindow = $(window.parent.document), //注意:这个地方用window.parent.document还是用window.top.document要按照情况来定
    show_navLi = topWindow.find("#min_title_list li"), 
    iframe_box = topWindow.find("#iframe_box");

    show_navLi.each(function() {
        if ($(this).find('span').attr("data-href") == href) {
            bStop = true;
            bStopIndex = show_navLi.index($(this));
            return false;
        }
    });
    if (!bStop) {
        creatIframe(href, title);
        min_titleList();
    } else {
        show_navLi.removeClass("active").eq(bStopIndex).addClass(
                "active");
        iframe_box.find(".show_iframe").hide().eq(bStopIndex).show()
                .find("iframe").attr("src", href);
    }

遇到一个错误: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'>&#xe6df;</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());