.ashx 数据源
public void ProcessRequest(HttpContext context)
{
SaiLun_SP_MySite.DAL.ttMonthlyPlanDetails dal = new SaiLun_SP_MySite.DAL.ttMonthlyPlanDetails();
string adaccount = ADHelper.GetCurrentUser();
SqlParameter[] parameter = { new SqlParameter("@User", SqlDbType.NVarChar) };
parameter[0].Value = adaccount;
DataSet ds = DbHelperSQL.RunProcedure("tSP_ttMonthlyPlanDetails_List", parameter, "data");
IsoDateTimeConverter timeFormat = new IsoDateTimeConverter();
timeFormat.DateTimeFormat = "yyyy-MM-dd HH:mm:ss";
string jsonStr = JsonConvert.SerializeObject(ds, timeFormat, new DataTableConverter());
context.Response.ContentType = "text/plain";
context.Response.Write(jsonStr);
}
js
<script src="../Resource/media/js/jquery-1.11.1.min.js"></script>
<script src="../Resource/media/js/jquery.dataTables.min.js"></script>
<link href="../Resource/media/css/jquery.dataTables.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$('#example').dataTable({
"processing": true,
"serverSide": false,
"ajax": "ttMonthlyPlanList.ashx",
"columns": [
{ "data": "id" },
{ "data": "taskname" },
{ "data": "user" },
{ "data": "createdate" },
{ "data": "startdate" },
{ "data": "enddate" },
{ "data": "inspectuser" },
{ "data": "statuscode" }
]
});
});
</script>
html
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>
<asp:Label ID="lblID" runat="server" Text="ID"></asp:Label>
</th>
<th>
<asp:Label ID="lblTaskName" runat="server" Text="任务名称"></asp:Label></th>
<th>
<asp:Label ID="lblUser" runat="server" Text="发起人"></asp:Label></th>
<th>
<asp:Label ID="lblCreateDate" runat="server" Text="发起时间"></asp:Label></th>
<th>
<asp:Label ID="lblStartDate" runat="server" Text="开始时间"></asp:Label></th>
<th>
<asp:Label ID="lblEndDate" runat="server" Text="结束时间"></asp:Label></th>
<th>
<asp:Label ID="lblInspectuser" runat="server" Text="审批人"></asp:Label></th>
<th>
<asp:Label ID="lblStatusCode" runat="server" Text="流程状态"></asp:Label></th>
</tr>
</thead>
</table>
常用方法补充:
有些数据不希望显示在屏幕上,或者需要什么条件才会显示,你可以使用columns.visible选项来实现被隐藏的列依然是表格的一部分,通过column().visible()方法来显示
被隐藏的列既然是表格的一部分,那么用户也可以搜索和访问被隐藏的列的相关内容
下面的例子展示了office和age两列不显示(右键查看网页源代码可以看到),并且不能被搜索到
$(document).ready(function() { $('#example').dataTable( { "columnDefs": [ { "targets": [ 2 ], "visible": false, "searchable": false }, { "targets": [ 3 ], "visible": false } ] } ); } );
多语言设置:
$(document).ready(function() { $('#example').dataTable( { "language": { "lengthMenu": "每页 _MENU_ 条记录", "zeroRecords": "没有找到记录", "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )", "infoEmpty": "无记录", "infoFiltered": "(从 _MAX_ 条记录过滤)" } } ); } );多语言.txt配置
{
"sSearch": "搜索:",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉, 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
},
"sZeroRecords": "没有检索到数据",
"sProcessing": "<img src='./loading.gif' />"
}
调用方法:
"oLanguage": {
"sUrl": "cn.txt"
}