• 数据表格对分页组件主要获取ajax数据交互后进行渲染。
实例
搜索电话 ：


创建时间 业务类型 商品名称 订单号 对方账号 余额 收入 支出 操作






交易号 订单号 交易时间 门店名称 订单金额 实收金额 优惠金额 状态 支付方式 交易类型 

             <!--案例一 直接JS渲染-->
             <!-- HTML结构 -->
             <table class="table" id="dt2"> </table>
             <!-- JS API -->
             $('#dt2').dataTable({
             url: "/api/t1/getDataInfo",
             columns: [
             {field: "createTime", title: "创建时间", width: 100},
             {field: "province", title: "业务类型", width: 100},
             {field: "channelNo", title: "商品名称", width: 100},
             {field: "creator", title: "订单号", width: 100,formatter: function(value, row, index){
             return "<div class="btn-group-box smaller-btn-gb">" +
             "<button type="button" class="btn default">详情:" + index + "</button>" +
             "<button type="button" class="btn default dropdown-menu-btn"></button>" +
             "</div>";
             }},
             {field: "corporation", title: "对方账号", width: 100},
             {field: "contactPhone", title: "余额", width: 100},
             {field: "status", title: "收入", width: 100},
             {field: "city", title: "支出", width: 100},
             {field: "op", title: "操作", width: 100, formatter: opFn}
             ]
             });


             <!--案例二 HTML渲染-->

             <!-- HTML结构 -->
             <table class="table" id="dt">
             <colgroup>
             <col style="width: 180px">
             <col style="width: 100px">
             <col>
             <col>
             <col>
             <col>
             <col>
             <col>
             <col style="width: 100px">
             </colgroup>
             <thead>
             <tr>
             <th data-options="createTime" data-formatter="testFn" data-style="{'text-align':'center'}"> 创建时间</th>
             <th data-options="province" data-style="{'text-align':'center'}"> 业务类型</th>
             <th data-options="channelNo"> 商品名称</th>
             <th data-options="creator" data-formatter="typeFn"> 订单号</th>
             <th data-options="corporation" data-style="{'text-align':'center'}"> 对方账号</th>
             <th data-options="contactPhone"> 余额</th>
             <th data-options="status"> 收入</th>
             <th data-options="city"> 支出</th>
             <th data-options="op" data-formatter="opFn"> 操作</th>
             </tr>
             </thead>
             </table>

             注释:
             data-options //field,
             data-formatter // 单元格formatter(格式化器)函数，带3个参数：
             value：字段值。
             rowData：行记录数据。
             rowIndex: 行索引。
             data-style // 单元格样式

             <!-- JS API -->
             $('#dt').dataTable({
             url: "/api/t1/getDataInfo", //后台数据请求地址
             queryParams: function() { //后台数据请求时自定义请求参数
             return {
             transferName: $('#search_1').val(),
             beginTime: $('#search_1').val(),
             }
             }
             });

             $("#ok").click(function() {
             $('#dt').dataTable('draw'); //外部调用dataTable 重新请求并渲染
             });

             $('#dt').dataTable('getPagination'); //获取当前页脚信息 return{ page:1 ,number:10}


配置参数

API
dataTable属性 属性类型 默认值 描述
url string null 一个URL从远程站点请求数据。
method string get 该方法类型请求远程数据。
queryParams object get 在请求远程数据的时候发送额外的参数。 
    代码示例： 
    $('#dg').dataTable({
        queryParams: {
            name: 'brickPlus',
            subject: 'dataTable'
        }
    });


列属性 属性类型 默认值 描述
title string undefined 列标题文本。
field string undefined 列字段名称。
width number undefined 列的宽度。如果没有定义，宽度将自动扩充以适应其内容。
formatter function undefined 单元格formatter(格式化器)函数，带3个参数： value：字段值。 rowData：行记录数据。 rowIndex: 行索引。 
    代码示例： 
    $('#dg').datagrid({
        columns:[
           {field:'userId',title:'User', width:80, formatter: function(value,row,index){
              if (row.user){
                    return row.user.name;
               } else {
                    return value;
               }
            }
         }]
     });
styler function undefined 单元格styler(样式)函数，返回如'background:red'这样的自定义单元格样式字符串。该函数带3个参数： value：字段值。 rowData：行记录数据。 rowIndex: 行索引。 代码示例： 
    代码示例： 
$('#dg').datagrid({
	columns:[[
		{field:'listprice',title:'List Price', width:80, align:'right',
			styler: function(value,row,index){
				if (value < 20){
					return 'background-color:#ffee00;color:red;';
				}
			}
		}
	]]
});


方法 参数 描述
getPagination none 返回页面对象
draw none 重载。但是它将保持在当前页。