jquery datatable ajax后台数据来源使用

1.jsp格式

<table class="table table-striped table-bordered table-hover"
id="sample_1">
<thead>
<tr>
<th class="table-checkbox">
<input type="checkbox" class="group-checkable"
data-set="#sample_1 .checkboxes" />
</th>
<th>
账号
</th>
<th class="hidden-480">
姓名
</th>
<th class="hidden-480">
电子邮箱
</th>
<th class="hidden-480">
电话
</th>
<th>
处理
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

2.表格的绘画

 vTable.dataTable({
            "bProcessing":false,//设置异步请求时,是否有等待框
            "bServerSide":true,//指定服务端分页,必须的属性!
            "sAjaxSource": vPath+"/manager/user/search.do?rand="+Math.random() , //获取数据的ajax方法的URL
            "bPaginate" : true,//是否支持分页  
            "bSort":true,
            "bStateSave":false,//保存状态到cookie
            "isShowSearch":false,
            "fnServerParams": function (aoData) {
               aoData.push({ "name": "参数名称", "value": 参数值 });
           },
            
            "fnServerData":function ( sSource, aoData, fnCallback ) {//获取数据的处理函数 
            $.ajax( {
        type: "POST", 
        url: sSource, 
        dataType: "json",
        data: { aoData: JSON.stringify(aoData) }, 
        success: function(resp) {
        fnCallback(resp.returnObject);
        },
        error:function(){
        alert('error');
        }
        });
            }, 
     
            //aoColumnDefs设置列的属性时,可以任意指定列,并且不需要给所有列都设置。
            //aoColumns:如果指定,那么这个数组的长度必须等于列数。使用“null”,您希望仅使用缺省值和自动检测选项
            "aoColumns": [
                         { "bSortable": false,
                         "mRender" : function(mData,type,full) {  
                                 var html = [];
                                 //html.push('<div class="checker">');
                                 //html.push('<span >');
                                 html.push('<input type=\"checkbox\" class=\"checkboxes\" id=\"tr_' + mData + '\"   value=\"' + mData + '\"  /> '); 
                               // html.push('</span>');
                                // html.push('</div>');
                                 return html.join('');  
                              }
                         },
                         {  "sName": "account"  },
                         {  "sName": "name"  },
                         { "bSortable": false, "sName": "email" },
                         { "bSortable": false, "sName": "telephone" },
                         {"mData" : null,"bSortable": false,  
                         "mRender" : function(mData,type,full) { 
                             var html = [];   
                             html.push('<a id="editUser" οnclick="update('+full[0]+')" class="btn yellow mini"><i class="icon-pencil"></i>修改</a>'); 
                             if(full.status == 0){  
                                 //html.push('<button οnclick="'+'auditDomain('+full.id+',1)" class="btn btn-primary btn-mini">通过</button>');   
                             }  
                             return html.join('');  
                          }
                         }
                       ],
                "aLengthMenu": [
                    [5, 15, 20, -1],
                    [5, 15, 20, "All"] // change per page values here
                ],
                // set the initial value
                "iDisplayLength": 10,
                "sDom" : "<'row'<'col-md-6 col-sm-12'><'col-md-6 col-sm-12'>>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", //自定义表格样式
                "sPaginationType": "bootstrap_full_number",
                "oLanguage": {
               "sSearch": "搜索",
            "sProcessing": "正在加载中......",
            "sEmptyTable": "表中无数据存在!",
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
                    "sZeroRecords": "没有检索到数据",
                    "sInfoEmpty":"",
                    "sInfoFiltered": "",
                    "oPaginate": {
            "sFirst": "首页",
               "sPrevious": "上一页",
               "sNext": "下一页",
               "sLast": "末页"
                    }
                }
            });

3.返回的数据格式

{
    "sEcho": 3,
    "iTotalRecords": 57,
    "iTotalDisplayRecords": 57,
    "aaData": [
        [
            "用户ID",
            "账号",
            "姓名",
            "电子邮箱",
            "电话"
        ],
        [
            "用户ID",
            "账号",
            "姓名",
            "电子邮箱",
            "电话"
        ],
        ...
    ] 
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值