dataTable 插件的应用

    第一步：要部署整个项目（copy插件脚本库）；

    <script type="text/javascript" language="javascript" src="js/jquery-1.10.2.js"></script>

    <script type="text/javascript" language="javascript" src="js/jquery.dataTables.min.js"></script>

    <style type="text/css" title="currentStyle">

@import "js/dataTable/css/demo_page.css";

@import "js/dataTable/css/demo_table.css";

@import "js/dataTable/css/demo_table_jui.css";

    </style>

    第二步：表的格式：创建表；（数据通过Ajax请求从服务器拿，）注意：表头信息必须放在<thead></thead>中，

    表体必须放在 <tbody></tbody>中，表最好要有属性ID，并且class="display"

    

    <table cellpadding="0" cellspacing="0" border="0" class="display" id="personList" width="100%">

<thead>

<tr>

<th>序号</th>

<th>姓名</th>

<th>性别</th>

<th>电话</th>

</tr>

</thead>

<tbody>

<tr class="odd gradeX">

<td colspan="4">没有任何信息</td>

</tr>

</tbody>

</table>

第三步：只需要有Jquery找到表，有datatable显示；$(“#example”).dataTable{       中间是配置        };

<script type="text/javascript">

$(function(){

var oTable = $("#personList").dataTable(

{

"bProcessing" : true,//加载数据时候是否显示进度条

"bServerSide" : true,//是否从服务加载数据 

"sAjaxSource" : "system/person!list.action?id=<s:property value='id'/>",//如果从服务器端加载数据,这个属性用于指                                                        定加载的路径 

"sPaginationType" : "full_numbers",

"oLanguage" : { //主要用于设置各种提示文本

"sProcessing" : "正在处理...", //设置进度条显示文本

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

"sEmptyTable" : "没有找到记录",//没有记录时显示的文本

"sZeroRecords" : "没有找到记录",//没有记录时显示的文本

"sInfo" : "总记录数_TOTAL_当前显示_START_至_END_",

"sInfoEmpty" : "",//没记录时,关于记录数的显示文本

"sSearch" : "搜索:",//搜索框前的文本设置

"oPaginate" : {

"sFirst" : "首页",

"sLast" : "未页",

"sNext" : "下页",

"sPrevious" : "上页"

}

}//用于设置提示文本

});

oTable.css("font-size","12px");//设置文本的样式；

})

</script>

第四步：后台处理

    了解dataTable向后台发送什么样的分页数据 

    *iDisplayStart       分页查询中，查询页开始的索引

    *iDisplayLength   分页查询中，总的记录数

    *sSearch

了解后台需要给dataTable返回什么样的数据，

第五步:后台处理；

    根据“sJAXSource”找到服务器加载数据，显示到dataTable中；

 分页功能的后台机制：

 了解dataTable向后台发送了什么内容；

    *iDisplayStart 分页查询中。查询开始的索引；

    *iDisplayLenth分页查询中，第几页的记录数

 了解后台需要给dataTable返回的数据；

 Map  map = new HashMap();

 map.put("aaData", vo.getDatas());

 //查出来总共有多少条记录

 map.put("iTotalRecords", vo.getTotal());

 map.put("iTotalDisplayRecords", vo.getTotal());

 JSonUtil.toJSON(map);