jquerydatatable通过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,jquery ajax例子
"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 >
<input type="hidden" id=projectcode name="projectcode"
value="<%=Parameter("projectcode").toString()%>" />
<div class="widget">
<label>开始付款⽇期：</label> <input type="text" id=stdate
class="ui-corner-all"  name="stdate"  οnclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" value="" />
</div>
</div>
<div >
<div  class="widget">
<label for="paydate">结束付款⽇期：</label> <input id="enddate"
class="ui-corner-all required" name="enddate"
οnclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" type="text"
title="⽇期必填" value="">
</div>
</div>
<div >
<input type="button" οnclick="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="ity.Payment"%>
<%@page import="com.biojia.service.*"%>
<%@page import="java.sql.ResultSet"%>
<%
PaymentService paymentService = new PaymentService();
String projectCode = Parameter("projectcode").toString();
String startDate = Parameter("stdate").toString();
String endDate = Parameter("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 = Payments(projectCode,startDate,endDate); try{
while (resultSet != null & ()) {
paydate = String("paydate");
contractno = String("contractno");
String("pursuerid");
String("paytype");
String("paid");
String("samplesize");
String("unitprice");
String("paymethod");
String("invice");
String("receipt");
String("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.String());
}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": " "
}
]
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。