一个完整的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': 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开始递增。