web端 jquery $().dateTable({});

刚开始接触jquery这个$().dateTable({}); 这个用法的时候 也是一脸蒙B ,现在借着用机会,整理下这个方法 ,真的很方便 很容易操作,远胜于以前的标签开发模式;



function renderTablesProducts(){

    $('#provider_table_products').dataTable({
        "bProcessing": true,//进度条
        "bDestroy":true,
        "bPaginate": true,//翻页功能
        "bAutoWidth": false,//自动宽度
        "bFilter": false,//过滤功能
        "bSort": true,//排序功能
        "bLengthChange":false,//不允许用户改变分页大小
        "bServerSide": true,
        "oLanguage" : {
            "sLengthMenu" : "每页显示 _MENU_ 条记录",
            "sZeroRecords" : "对不起,没有匹配的数据",
            "sInfo" : "第 _START_ - _END_ 条 / 共 _TOTAL_ 条数据",
            "sInfoEmpty" : "没有匹配的数据",
            "sInfoFiltered" : "(数据表中共 _MAX_ 条记录)",
            "sProcessing" : "正在加载中...",
            "oPaginate" : {
                "sFirst" : "第一页",
                "sPrevious" : " 上一页 ",
                "sNext" : " 下一页 ",
                "sLast" : " 最后一页 "
            }
        },
        "sAjaxSource":  "${ctx}/hm/addProductList.html",
        "fnServerParams": function (aoData) {
            aoData.push(
                    {"name": "addhmpId", "value": $("#productId").val()},
                    {"name":"addhmpName","value": $("#product").val()},
                    {"name":"HMP_CateId_1","value": $("#cateSelect").val()},
                    {"name":"HMP_CateId_2","value": $("#HMP_CateId_2").val()},
                    {"name":"HMP_CateId_3","value": $("#HMP_CateId").val()},
                    {"name":"HMP_PP","value": $("#brandSelect").val()},
                    {"name":"cateId","value": $("#cateId").val()}
            );
        },
        "aoColumns": [
            {
                "sTitle": "选择<input type='checkbox' id='allcheckbox' />",
                "mData": "HMP_Id",
                "bSortable": false,
                "bVisible": true,
                "mRender": function(sVal,type,oObj){
                    return "<input type='checkbox' class='checkboxonly' value='"+sVal+"'/>";

                }
            },
 这里着重强调下  :


这个方法里面  有自动分页功能 ,也就是说如果你后端获取的数据是分页的数据,那页面端 这里会自动与你的sql所匹配,不需要再做其他的设置 调整

"bPaginate": true,//翻页功能

而且,翻页功能是可以控制的  ,


"sAjaxSource":  "${ctx}/hm/addProductList.html",

这是异步请求的路径  ,携带参数的话便是:

"fnServerParams": function (aoData) {
后面跟的参数  ,获取的时候用jquer即可
 
"aoColumns": []  这个是每行的操作  单元格
sTile :  是单元格 名称(可以为汉字 或者 按钮)
mData :  为sql中字段的名称(或者另外其的别名)
"mRender": function(sVal,type,oObj){
                    return "<input type='checkbox' class='checkboxonly' value='"+sVal+"'/>";

                }
上面的内容,则是 控制页面端显示什么内容 ,经常用作状态 ,操作按钮,需要判断的显示问题(返回经常返回的是 字符串或者其他格式)
$('#provider_table_products').dataTable({

这个根据table 标签的 ID 来定义:
<table class="table table-striped table-bordered table-hover dataTable" aria-describedby="sample-table-2_info" id="provider_table_products">
</table>

而,后端获取到数据后,要以json的格式 传到前端,用来页面展示
jsonObject.put("aaData", query.getRecords());
System.out.println(query.getRowCount()+"这个是显示多少条信息");
jsonObject.put("iTotalRecords", query.getRowCount());
jsonObject.put("iTotalDisplayRecords", query.getRowCount());
PageView query = new PageView();

PageView类 其实就是 分页类,类中定义的就是一般分页所需要的数据:例如:起始 ,每页显示多少条数据等
query.getRecords()
后端获取到的数据集合
jsonObject.put("iTotalRecords", query.getRowCount());

则是sql查询出来的数据总共多少条记录 ,这个如果不清晰,页面显示的时候也是不完整的 ,多数分页问题是这里存在问题!



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值