一个完整的jQuery datatable示例

html代码

<div>
<nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> u3d管理 <span class="c-gray en">></span>模型管理 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a></nav>
<div class="pd-20">
<div class="text-c"> 日期范围：
<input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'endTime\')||\'%y-%M-%d\'}'})" id="startTime" name="startTime" class="input-text Wdate" style="width:120px;">

<input type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'startTime\')}',maxDate:'%y-%M-%d'})" id="endTime" name="endTime" class="input-text Wdate" style="width:120px;">
<input type="text" name="keyword" id="keyword" placeholder="商品名称" style="width:250px" class="input-text">
<button id="btn_search" class="btn btn-success" type="button"><i class="Hui-iconfont"></i> 搜产品</button>
<button id="btn_clear" class="btn btn-success" type="button"><i class="Hui-iconfont"></i> 清空</button>
</div>
<div class="mt-20">
<table id="productModelDg" class="table table-border table-bordered table-bg table-hover table-sort">
<thead>
<tr class="text-c">
<th width="40">序号</th>
<th width="40">商品ID</th>
<th width="40">模型ID</th>
<th>商品名称</th>
<th>商品列表图</th>
<th>模型预览图</th>
<th width="140">上传时间</th>
<th width="140">修改时间</th>
<th width="70">操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>

js代码
<script type="text/javascript" src="${base}/static/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${base}/static/lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="${base}/static/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${base}/static/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${base}/static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="${base}/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="${base}/static/js/common/dateUtil.js"></script>
<script type="text/javascript" src="${base}/static/lib/unslider/unslider.min.js"></script>

<script type="text/javascript">

var productModelTable;
$(document).ready(function() {
productModelTable = $("#productModelDg").DataTable({
'fnDrawCallback': function(table) {
$("#productModelDg_paginate").append(" 到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:27px'> 页
<a class='btn btn-default shiny' href='javascript:void(0);' id='dataTable-btn' style='text-align:center'>确认</a>");
var oTable = $("#productModelDg").dataTable();
$('#dataTable-btn').click(function(e) {
if($("#changePage").val() && $("#changePage").val() > 0) {
var redirectpage = $("#changePage").val() - 1;
} else {
var redirectpage = 0;
}
oTable.fnPageChange(redirectpage);
});
},
'bStateSave': true,
'serverSide': true,
'paging': true,
'autoWidth': true,
'lengthMenu': [10, 20, 50, 100],
'lengthChange': true,
'searching': false,
'ordering': false,
'info': true,
'ajax': {
'url': '/u3dProductModle/getProductList',
'type': 'POST',
'data': function(data) {
data.keyword = $.trim($('#keyword').val());
data.startTime = $('#startTime').val();
data.endTime = $('#endTime').val();
}
},
'columns': [
{
'data':null
},{
'data': 'id'
},{
'data': 'modelId',
'render':function(data,type,row){
if(data==null){
return null;
}
return data;
}
},{
'data': 'name'
},{
'data': 'listPic',
'render': function(data, type, row) {
if(data!=null){
img = '<img src="${imageDomain}/'+data+'@200w">';
return img;
}
return null;
}
},{
'data': 'modelImg',
'render': function(data, type, row) {
if(data!=null){
img = '<img src="${imageDomain}/'+data+'@200w">';
return img;
}
return null;
}
},{
'data': 'createTime'
}, {
'data': 'updateTime'
}, {
'data'
bc31
: null
}],
'columnDefs': [{
'targets': [6,7],
'render': function(data, type, row) {
return dateUtil.format(new Date(data), 'yyyy-MM-dd hh:mm:ss');
}
}, {
'targets': -1,
'render': function(data, type, row) {
var html = '<a title="上传" href="javascript:void(0);" onclick="upProductModel(\'' + row.id + '\')" class="ml-5" style="text-decoration:none">';
html += '<i class="Hui-iconfont"></i>';
html += '</a>  ';
html += '<a title="删除" href="javascript:void(0);" onclick="delProductModel(\'' + row.id + '\')" class="ml-5" style="text-decoration:none">';
html += '<i class="Hui-iconfont"></i>';
html += '</a>';
return html;
}
}],
'createdRow': function(row, data, dataIndex) {
$(row).addClass('text-c va-m');
}
});

productModelTable.on('draw.dt',function() {
productModelTable.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
//i 从0开始，所以这里先加1
i = i+1;
//服务器模式下获取分页信息，使用 DT 提供的 API 直接获取分页信息
var page = productModelTable.page.info();
//当前第几页，从0开始
var pageno = page.page;
//每页数据
var length = page.length;
//行号等于 页数*每页数据长度+行号
var columnIndex = (i+pageno*length);
cell.innerHTML = columnIndex;
});
}).draw();

$('#btn_search').on('click', function() {
productModelTable.ajax.reload();
});

$('#btn_clear').on('click', function() {
$('#keyword').val("");
$('#startTime').val("");
$('#endTime').val("");
});

});
</script>

以上包括跳转指定页面，第一行从1开始递增。