一个完整的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" οnfοcus="WdatePicker({maxDate:'#F{$dp.$D(\'endTime\')||\'%y-%M-%d\'}'})" id="startTime" name="startTime" class="input-text Wdate" style="width:120px;">
			
			<input type="text" οnfοcus="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': 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);" οnclick="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);" οnclick="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开始递增。