jquery datatable 通過ajax讀取資料例項
最近客戶要求在jquery datatable 通過自己輸入條件讀取後臺資料，通過查詢文件得知jquery datatable 可以通過ajax讀取資料 ，具體程式碼如下。
一.jsp程式碼如下
<script>
function getpayment(){
var projectcode=$("#projectcode").val();
var stdate=$("#stdate").val();
var enddate=$("#enddate").val();
var url= "payment-list-ajax.jsp?projectcode="+projectcode+"&stdate="+stdate+"&enddate="+enddate;
//再次查詢時先刪除paymentlist，如果少了以下語句每次只能查詢一次，第二次點選查詢就不執行。
var table=$('#paymentlist').dataTable();
if(table){
table.fnDestroy();}
$('#paymentlist').dataTable( {
"processing": true,
"serverSide": true,
"bInfo":false,//是否顯示是否啟用底邊資訊欄
"sAjaxSource": url,
'autoWidth': true,
'pagingType': 'full_numbers',
"language": {
'lengthMenu': '每頁顯示 _MENU_ 記錄',
'zeroRecords': '沒有資料 - 抱歉',
'info': ' 第_PAGE_ 頁/共 _PAGES_頁',
'infoEmpty': '沒有符合條件的記錄',
'search': '查詢',
'infoFiltered': '(從 _MAX_ 條記錄中過濾)',
'paginate': { "first": "首頁 ", "last": "末頁", "next": "下一頁","previous": "上一頁"}
},
"retrieve":true,
"paging": true,
"ordering": true,
"info": true,
"columns": [
{ "data": "paydate" },
{ "data": "contractno" },
{ "data": "pursuercode" },
{ "data": "paytype" },
{ "data": "paid" },
{ "data": "samplesize" },
{ "data": "unitprice" },
{ "data": "paymethod" },
{ "data": "invice" },
{ "data": "receipt" },
{ "data": "remark" }
]
} );
}
</script>
</head>
<body>
<fieldset>
<div>
<div style="float: left; width: 200px;">
<input type="hidden" id=projectcode name="projectcode"
value="<%=request.getParameter("projectcode").toString()%>" />
<div class="widget">
<label>開始付款日期：</label> <input type="text" id=stdate
class="ui-corner-all" name="stdate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"
value="" />
</div>
</div>
<div style="float: left; margin-left: 0px; width: 200px;">
<div class="widget">
<label for="paydate">結束付款日期：</label> <input id="enddate"
class="ui-corner-all required" name="enddate"
onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" type="text"
title="日期必填" value="">
</div>
</div>
<div style="float: left; margin-top:25px; margin-left: 0px; width:0px;">
<input type="button" onclick="getpayment()" id="select" value="查詢" />
</div>
</div>
</fieldset>
<fieldset>
<table id='paymentlist' class='display cell-border' style='width: 100%'>
<caption>
<b>付款明細</b>
</caption>
<thead>
<tr>
<th>付款日期</th>
<th>合同編號</th>
<th>收款單位</th>
<th>名目</th>
<th>支付金額</th>
<th>樣本量</th>
<th>單價</th>
<th>付款方式</th>
<th>發票</th>
<th>簽收單</th>
<th>備註</th>
</tr>
</thead>
</table>
</fieldset>
</body>
</html>
二.payment-list-ajax.jsp要求反回的資料 客戶為json格式 ，程式碼如下
<%@page import="java.math.BigDecimal"%>
<%@page import="com.biojia.entity.Payment"%>
<%@page import="com.biojia.service.*"%>
<%@page import="java.sql.ResultSet"%>
<%
PaymentService paymentService = new PaymentService();
String projectCode = request.getParameter("projectcode").toString();
String startDate = request.getParameter("stdate").toString();
String endDate = request.getParameter("enddate").toString();
String datastr="{ \"data\":[";
String paydate;
String contractno;
String pursuercode;
String paytype;
String paid;
String samplesize;
String unitprice;
String paymethod;
String invice;
String receipt;
String remark;
ResultSet resultSet = paymentService.getPayments(projectCode,startDate,endDate);
try{
while (resultSet != null & resultSet.next()) {
paydate = resultSet.getString("paydate");
contractno = resultSet.getString("contractno");
pursuercode=resultSet.getString("pursuerid");
paytype=resultSet.getString("paytype");
paid=resultSet.getString("paid");
samplesize=resultSet.getString("samplesize");
unitprice=resultSet.getString("unitprice");
paymethod=resultSet.getString("paymethod");
invice=resultSet.getString("invice");
receipt=resultSet.getString("receipt");
remark=resultSet.getString("remark");
if(paydate==null){paydate="";}
if(contractno==null){contractno="";}
if(pursuercode==null){pursuercode="";}
if(paytype==null){paytype="";}
if(paid==null){paid="";}
if(samplesize==null){samplesize="";}
if(unitprice==null){unitprice="";}
if(paymethod==null){paymethod="";}
if(invice==null){invice="";}
if(receipt==null){receipt="";}
if(remark==null){remark="";}
datastr=datastr+"{\"paydate\":\""+paydate+"\","
+"\"contractno\":\""+contractno+"\","
+"\"pursuercode\":\""+pursuercode+"\","
+"\"paytype\":\""+paytype+"\","
+"\"paid\":\""+paid+"\","
+"\"samplesize\":\""+samplesize+"\","
+"\"unitprice\":\""+unitprice+"\","
+"\"paymethod\":\""+paymethod+"\","
+"\"invice\":\""+invice+"\","
+"\"receipt\":\""+receipt+"\","
+"\"remark\":\""+remark+"\"},";
}
}catch(Exception e){
out.println(e.toString());
}finally{
datastr=datastr.substring(0,datastr.length()-1);
datastr=datastr+"]}";
}
out.print(datastr);
%>
注意事項：
1.javascript程式碼中一定要以下語句，因為不加每次只能查詢一次，第二次點選查詢就不執行。
var table=$('#paymentlist').dataTable();
if(table){
table.fnDestroy();}
2.jsp返回資料欄位一定要與javascript設定的完全一致。
{
"data": [
{
"paydate": "2015-09-09",
"contractno": "111111111",
"pursuercode": "001",
"paytype": "\u4e34\u5e8a\u8bd5\u9a8c\u8d39\u7528(\u533b\u9662\u7ecf\u8d39)",
"paid": "32.23",
"samplesize": "0.00",
"unitprice": "0",
"paymethod": "\u73b0\u91d1",
"invice": "\u6709",
"receipt": "\u6709",
"remark": " "
},
{
"paydate": "2015-09-14",
"contractno": "23131",
"pursuercode": "01",
"paytype": "\u4e34\u5e8a\u8bd5\u9a8c\u8d39\u7528(\u533b\u9662\u7ecf\u8d39)",
"paid": "888.00",
"samplesize": "999.00",
"unitprice": "0",
"paymethod": "\u73b0\u91d1",
"invice": "\u6709",
"receipt": "\u6709",
"remark": " "
}
]
}