1.首先引入相关的js文件
<script src="<%=root %>/js/jquery.dataTables.js" ></script>
<script src="<%=root %>/js/jquery.dataTables.min.js" ></script>
2. 书写要放入表格的 html
<div id="chainInfoListTabDiv">
<table class="table table-striped table-bordered table-hover"
cellpadding="0" cellspacing="0" border="0" id="chainInfoListTab" style="width:100%;">
<thead>
<tr>
<th style="width:100px;">皮肤名称</th>
<th style="width:100px;">皮肤下载量</th>
<th style="width:100px;">皮肤强推日期</th>
<th style="width:100px;">皮肤结束日期</th>
<th style="width:200px;">操作</th>
</tr>
</thead>
</table>
</div>
3.
<script type="text/javascript">
$(function (){
initData();//初始化执行initdata()方法 用来获取table的值 即 后台传过来的值
});
var initData=function (){
$("#chainInfoListTab").dataTable({
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_条",
"sProcessing": "正在载入........",
"sZeroRecords": "没有找到符合条件的数据",
"sProcessing": "<img src=’./loading.gif’ />",
"sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条",
"sInfoEmpty": "没有记录",
"sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
"sSearch": "搜索:",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
},
destroy: true,
"bPaginate": true, //翻页功能
"bLengthChange": false, //改变每页显示数据数量
"bFilter": false, //过滤功能
"bSort": false, //排序功能
"bInfo": true,//页脚信息
"bScrollCollapse" : false,
/*默认排序设置*/
"aaSorting": [[1, "desc"]],//设置第1个元素为默认排序
/*默认翻页样式设置*/
"sPaginationType": "full_numbers",
/*是否开启主题*/
"bJQueryUI": true,
"sAjaxSource": "<%=root%>/happinessMovie/queryAllSkinInfo",
"bServerSide": true,//指定从服务器端获取数据
columns: [
{
data: function (e) {
// 后台返回的各个字段的值 判断 一一写入 如果不判断 后台该字段的值为null 会报错
if(e.skinName==null||e.skinName==""){
return "---";
}
return "<span class='badge badge-primary' title='"+e.skinName+"'>"+e.skinName+"</span>";
}
}, {
data:function(e){
return e.skinCount;
}
},{
data: function (e) {
if(e.skinPushTime==null||e.skinPushTime==""){
return "---";
}
return "<span class='badge badge-primary' title='"+e.skinPushTime+"'>"+e.skinPushTime+"</span>";
}
},{
data: function (e) {
if(e.skinEndTime==null||e.skinEndTime==""){
return "---";
}
return "<span class='badge badge-primary' title='"+e.skinEndTime+"'>"+e.skinEndTime+"</span>";
}
},{
data: function (e) {
var html="";
html +="<button class='btn btn-info' style='margin-left: 20px;' id='editBtn' type='button' data-toggle='modal' data-target='#ChainInfoModal' tabindex='-1' onclick='getChainInfoById(\""+e.id+"\",\""+e.skinName+"\",\""+e.skinBackImg+"\",\""+e.skinCoverImg+"\",\""+e.skinUrl+"\",\""+e.skinCount+"\",\""+e.skinPushTime+"\",\""+e.skinEndTime+"\")'>";
html +="<i class='glyphicon glyphicon-pencil'></i>编辑</button>";
html +="<button class='btn btn-info btn-danger' id='deleteAppnewsBUT' style='margin-left: 20px;' type='button' onclick='delMercEnterInfo(\""+e.id+"\")' >";
html +="<i class='glyphicon glyphicon-remove-circle'></i>删除</button>";
return html;
}
}
],
"fnServerParams": function (aoData) {
aoData.push(
// 根据该值查询
{ "name": "skinName", "value": $("#skin_name").val().replace(/^ +| +$/g,'') }
);
},
//请求数据
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"type": 'post',
"url": sSource,
"dataType": "json",
"data": {
aoData: JSON.stringify(aoData)
},
"success": function (resp) {
fnCallback(resp);
}
});
}
});
};
</script>