dataTable插件简单使用

首先，要导入一个js文件dataTables.min.js

<script src='js/ui/jquery.dataTables.min.js'></script>

然后在html里面添加你需要的table，代码如下

<table id="tableMain" class="table table-striped table-bordered bootstrap-datatable" style="font-size: 13px;">

<thead>

<tr>

<th style="display: none;">ID</th>

<th style="width: 15%">灾情大类名称</th>

<th style="width: 15%">灾情小类名称</th>

<th style="width: 30%">灾情描述内容</th>

<th style="width: 20%">修改</th>

<th style="width: 20%">删除</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

然后在你的js中定义oTable变量，代码如下：

var oTable = $("#tableMain").dataTable({ //此处的tableMain为table的id值

"sAjaxSource": "message/MessAnalysis_getZqdmList",//此处为跳转后台的url，此处用的是Strusts2框架

"aoColumns": [ //返回的参数字段，和表字段对应

{ "mDataProp": "id" },

{ "mDataProp": "zqdlmc" },

{ "mDataProp": "zqxlmc" },

{ "mDataProp": "zqmsnr" },

{ "mDataProp": "id" },

{ "mDataProp": "id" }

],

"aoColumnDefs": [ //对指定列做操作，此处效果为为第一列设置不能搜索，不能显示

{ "bSearchable": false, "bVisible": false, "aTargets": [0] }

] ,

"fnServerParams": function (aoData) { //此处为参数的传递，后台通过request.getParameter("name")来获取，注意编码

aoData.push({ "name": "nodeId", "value": vNodeSel},

{ "name": "tj", "value": $("input[aria-controls='tableMain']").val()});

},

"sPaginationType": "full_numbers", //显示分页样式，此处是支持全数字

"bSort": false, //排序

"bProcessing":true, //支持ajax方式提交和sAjaxSource一起使用

"bServerSide":true,

"bDestroy":true,

"bRetrieve": true,

"oLanguage": {

"sLengthMenu": "_MENU_ 条记录/页", //分页，每页显示多少条记录

"sProcessing": "加载中，请稍后..."},

"fnRowCallback": function( nRow, aData, iDisplayIndex ) { //返回函数，对返回数据处理，此处增加了两个按钮编辑和删除

var html1 = "<a class='btn btn-info' onclick='edit(\""+aData.id+"\",\""+aData.zqxlmc+"\",\""+aData.zqdlmc+"\",\""+aData.zqmsnr+"\",\""+aData.bz+"\")' style='background-color: #389EBC;border-color:#389EBC;'>"+

"<i class='icon-edit icon-white'></i> 编辑</a>";

var html2 ="<a class='btn btn-danger' onclick='del(\""+aData.id+"\")' style='padding-top;1;padding-bottom:1'>"+

"<i class='icon-trash icon-white'></i> 删除</a>";

$('td:eq(3)', nRow).html(html1);

$('td:eq(4)', nRow).html(html2);

return nRow;

}

});

为了保证代码的完整，我把编辑和删除的代码也贴上

编辑代码

<div id="add-form" title="灾情代码编辑" style="display: none">

<form id = "update_form" name = "update_form" action='message/MessAnalysis_updateZqxl' method='post'>

<div style="width:100%;float:left;">

<table>

<tr>

<td><label>灾情大类:</label></td>

<td><select id = "zqdl" name = "t.zqdlmc">

</select></td>

</tr>

<tr>

<td><label>灾情小类:</label></td>

<td>

<input type="text" name="t.zqxlmc" id="zqxl" value="" >

<td>

</tr>

<td align="right">灾情描述内容:</td>

<td><textarea rows="3" cols="4" id = "zqmsnr" name = "t.zqmsnr"> </textarea></td>

</tr>

<tr>

<td align="left">备注:</td>

<td><textarea rows="4" cols="4" id = "bz" name = "t.bz"> </textarea></td>

</tr>

</table>

<input type = "hidden" id = "id" name = "t.id" />

</div>

</form>

</div>

对应脚本

function edit(id,zqxlmc,zqmsnr,zqdlmc,bz){

$.edit(id,zqxlmc,zqmsnr,zqdlmc,bz);

}

jQuery.extend({

edit:function(id,zqxlmc,zqdlmc,zqmsnr,bz) {

$(".ui-dialog:eq(0) .ui-dialog-buttonpane button:first").addClass("btn btn-success");

$(".ui-dialog:eq(0) .ui-dialog-buttonpane button:first").html("<i class='icon-ok icon-white'></i> 修改");

$(".ui-dialog:eq(0) .ui-dialog-buttonpane button:eq(1)").addClass("btn btn-warning");

$(".ui-dialog:eq(0) .ui-dialog-buttonpane button:eq(1)").html("<i class='icon-repeat icon-white'></i> 取消");

$("#zqdl").html("");

$("#zqdl").append("<option value = "+zqdlmc+">"+zqdlmc+"</option>");

$("#zqdl").attr("disabled",true);

$("#zqxl").val(zqxlmc);

$("#zqmsnr").val(zqmsnr);

$("#bz").val(bz);

$("#id").val(id);

$( "#add-form" ).dialog( "open" );

}

});

$( "#add-form" ).dialog({

autoOpen: false,

resizable: false,

height:400,

width:400,

modal: true,

buttons: {

"修改": function() {

$( this ).dialog( "close" );

$("#update_form").submit();

},

"取消": function() {

$( this ).dialog( "close" );

}

}

});

删除代码

<div id="dialog-confirm" title="确定删除？" style="display: none"></div>

脚本

function del(id){

$.del(id);

}

jQuery.extend({

del:function(id) {

$(".ui-dialog:eq(1) .ui-dialog-buttonpane button:first").addClass("btn btn-success");

$(".ui-dialog:eq(1) .ui-dialog-buttonpane button:first").html("<i class='icon-ok icon-white'></i> 删除");

$(".ui-dialog:eq(1) .ui-dialog-buttonpane button:eq(1)").addClass("btn btn-warning");

$(".ui-dialog:eq(1) .ui-dialog-buttonpane button:eq(1)").html("<i class='icon-repeat icon-white'></i> 取消");

//idd = $(this).parent().parent().attr("id");

//yhm = $(this).parent().parent().children("td:eq(1)").html();

idd = id

$( "#dialog-confirm" ).dialog( "open" );

}

});

$( "#dialog-confirm" ).dialog({

autoOpen: false,

resizable: false,

height:140,

modal: true,

buttons: {

"删除": function() {

$( this ).dialog( "close" );

var tmpForm = $("<form action='message/MessAnalysis_deleteZqdm' method='post'></form>");

tmpForm.append("<input type='hidden' value='"+idd+"' name='t.id'/>");

tmpForm.appendTo(document.body).submit();

},

"取消": function() {

$( this ).dialog( "close" );

}

}

});