Javascript 用于DataTables服务器端脚本的客户端脚本
我正在为数据表的服务器端处理编写代码。我有一个UI页面，在其中收集所有用户输入，如开始/结束日期、令牌ID、批处理ID等。现在我必须将这些值传递给后端脚本，并在UI页面中运行查询并将输出呈现给datatables 因此，我有JS代码来获取和验证用户输入，但我不确定如何调用/设置datatables的参数来表示服务器端脚本。以下是我的脚本：Javascript 用于DataTables服务器端脚本的客户端脚本,javascript,python,datatables,Javascript,Python,Datatables,我正在为数据表的服务器端处理编写代码。我有一个UI页面，在其中收集所有用户输入，如开始/结束日期、令牌ID、批处理ID等。现在我必须将这些值传递给后端脚本，并在UI页面中运行查询并将输出呈现给datatables 因此，我有JS代码来获取和验证用户输入，但我不确定如何调用/设置datatables的参数来表示服务器端脚本。以下是我的脚本： function runreport(datastring) { var oTable = $('#example').dataTable( {
function runreport(datastring)
{
var oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "runsearch.py",
"bDestroy" : true,
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function(json) {
$("div#report_result").show();
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
fnCallback(json);
}
} );
}
} );
}
k is undefined
[Break On This Error]
...Sorting=="undefined"&&typeof e.saved_aaSorting=="undefined")e.aaSorting[a][1]=k....
jquery....min.js (line 150)
#!/usr/local/bin/python
import cgi
import MySQLdb
import json
print "Content-Type: application/json"
print
displaylength =5
result = {'iDisplayLength':str(displaylength), 'sPaginationType':'full_numbers', 'bProcessing':1, 'bDestroy': 1, 'bRetrieve':1, 'aaData':[{'First Field':'First Field Value', 'Second Field':'Second Field Value', 'Third Field':'Third Field Value', 'Fourth Field':'Fourth Field Value', 'Fifth Field':'Fifth Field Value', 'Sixth Field':'Sixth Field Value', 'Seventh Field':'Seventh Field Value', 'Eight Field':'Eight Field Value', 'Nineth Field':'Nineth Field Value'}, {'First Field':'First Field Value', 'Second Field':'Second Field Value', 'Third Field':'Third Field Value', 'Fourth Field':'Fourth Field Value', 'Fifth Field':'Fifth Field Value', 'Sixth Field':'Sixth Field Value', 'Seventh Field':'Seventh Field Value', 'Eight Field':'Eight Field Value', 'Nineth Field':'Nineth Field Value'}], 'aoColumns':[{'sTitle':'First Field', 'mDataProp': 'First Field'},{ 'sTitle':'Second Field', 'mDataProp': 'Second Field'}, {'sTitle':'Third Field', 'mDataProp': 'Third Field' }, { 'sTitle':'Fourth Field', 'mDataProp': 'Fourth Field' }, { 'sTitle':'Fifth Field' , 'mDataProp': 'Fifth Field' }, { 'sTitle':'Sixth Field', 'mDataProp': 'Sixth Field' }, { 'sTitle':'Seventh Field', 'mDataProp': 'Seventh Field' }, { 'sTitle':'Eight Field', 'mDataProp': 'Eight Field' }, { 'sTitle':'Nineth Field', 'mDataProp': 'Nineth Field' }]}
json_string = json.dumps(result)
print json_string
有多种方法可以做到这一点。DataTables支持，因此您可以编写一个脚本，输出json数组并将其传递给DataTables插件
我会浏览其中的一些内容，以了解将数据传递到数据表的其他方法。aoData.push是您需要的。将其用于fnServerData回调，替换aoData.push中的名称和值以获得要传递的值。Name将是键，value将是值，作为$\u请求变量传递：
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push({ "name": "var1name", "value": $('#var1').val() },
{ "var2name": "company_name", "value": $('#var2').val() });
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}
oTable.fnDraw(false);
/* Instantiate the Datatables on the ASP.NET GridView */
var dt = $('#gvJobs').dataTable({
"sDom": 'C<"clear">Rlfrtip', /* ColReOrder, ColVis */
"bFilter": true, /* Use custom filters, i have to revise this as I am doing the drop down filter manually now */
"bSort": true,
"bAutoWidth": false,
"bProcessing": true, /* Needed, Read Datatables documentation */
"bServerSide": true, /* Needed, Read Datatables documentation */
"aaSorting": [[0, "desc"]], /* Initial Default Sorting on the First Column */
"sPaginationType": "full_numbers",
"fnServerData": function (sSource, aoData, fnCallback) {
/* Adding Custom Drop Down Filter property to aoData which will be used server side */
aoData.push({ name: "ddlStatus", value: $("#ddlStatus option:selected").text() });
/* Here I do the PageMethods call (ASP.NETs Ajax Replacement) PageMethods.getData
"getData" is a Server Side C# Method which looks like this:
[WebMethod]
public static string getData(List<oaData> aoData)
{
//Method Code
}
With page methods you pass in all your parameters matching the server side method,
And right at the end, add your two callback functions for onsuccess and onerror
*/
PageMethods.getData(aoData, function (obj) {
/* On Success, datatables fnCallback with JSON object */
fnCallback(JSON.parse(obj));
}, function (XMLHttpRequest, textStatus, errorThrown) {
/* On Error, show error alert */
alert(XMLHttpRequest.status + ': ' + XMLHttpRequest.responseText);
});
},
"aoColumns": [
/* This (JobNo) my first column which is Custom with 3 Images and a HyperLink to another page,
The last 5 Columns is hidden from the User because those fields are only used to
Render the correct images in this first column, Only used as Eval fields basically
Note that mDataProp is the GridView column's "DataField" and not the "HeaderText"
*/
{ "mDataProp": "JobNo",
"fnRender": function (oObj) {
return "<img src='" + (oObj.aData.HasAttachments ? "css/paperclip-icon.png" : "css/empty-icon.png") + "' height='16px' />"
+ "<a href='#' onclick=\"gotoJobDetail('" + oObj.aData.JobId + "');\">" + oObj.aData.JobNo + "</a>"
+ "<img src='" + (oObj.aData.Visited ? "css/yes.png" : "css/no.png") + "' height='16px' />"
+ "<img src='" + (oObj.aData.Completed ? "css/completed.png" : "css/notcompleted.png") + "' height='16px' />";
},
"bUseRendered": true /* This renders the Column in HTML first, else you'd see the actual HTML text in the column */
},
{ "mDataProp": "JobStatusName" },
{ "mDataProp": "StatusDateTime" },
/* Only used as Eval Field for one of the images in the JobNo Column */
{ "mDataProp": "HasAttachments",
"bSearchable": false,
"bVisible": false
},
/* Only used as Eval Field for one of the images in the JobNo Column */
{"mDataProp": "Visited",
"bSearchable": false,
"bVisible": false
},
/* Only used as Eval Field for one of the images in the JobNo Column */
{"mDataProp": "Completed",
"bSearchable": false,
"bVisible": false
},
/* Just Hidden, not used at the moment neither by the user nor the application */
{"mDataProp": "JobStatusId",
"bSearchable": false,
"bVisible": false
},
/* Only used as Eval Field for one of the images in the JobNo Column */
{"mDataProp": "JobId",
"bSearchable": false,
"bVisible": false
}
]
});
/*实例化ASP.NET GridView上的数据表*/
var dt=$（'#gvJobs'）。数据表({
“sDom”：“CRlfrtip”，/*ColReOrder，ColVis*/
“bFilter”：是的，/*使用自定义过滤器，我必须修改它，因为我现在正在手动执行下拉过滤器*/
“bSort”：正确，
“bAutoWidth”：假，
“bProcessing”：true，/*需要，请阅读Datatables文档*/
“bServerSide”：true，/*需要，请阅读Datatables文档*/
“aaSorting”：[[0，“desc”]]，/*第一列的初始默认排序*/
“sPaginationType”：“完整编号”，
“fnServerData”：函数（sSource、aoData、fnServerData回调）{
/*向将在服务器端使用的aoData添加自定义下拉筛选器属性*/
aoData.push（{name:“ddlStatus”，value:$（“#ddlStatus选项：选中”）.text（）}）；
/*这里我进行PageMethods调用（ASP.NETs Ajax替换）PageMethods.getData
“getData”是一种服务器端C#方法，如下所示：
[网络方法]
公共静态字符串getData（列表aoData）
{
//方法代码
}
通过page方法，您可以传入与服务器端方法匹配的所有参数，
在末尾，为onsuccess和onerror添加两个回调函数
*/
getData（aoData，函数（obj）{
/*成功后，datatables将使用JSON对象进行回调*/
fnCallback（JSON.parse（obj））；
}，函数（XMLHttpRequest、textStatus、Error抛出）{
/*出现错误时，显示错误警报*/
警报（XMLHttpRequest.status+'：'+XMLHttpRequest.responseText）；
});
},
“aoColumns”：[
/*这（JobNo）是我的第一个专栏，其中有3个图片和指向另一个页面的超链接，
最后5列对用户隐藏，因为这些字段仅用于
在第一列中渲染正确的图像，基本上仅用作评估字段
请注意，mDataProp是GridView列的“数据字段”，而不是“HeaderText”
*/
{“mDataProp”：“JobNo”，
“fnRender”：函数（oObj）{
返回“”
+ ""
+ ""
+ "";
},
“bUseRendered”：true/*这将首先以HTML呈现列，否则您将在列中看到实际的HTML文本*/
},
{“mDataProp”：“JobStatusName”}，
{“mDataProp”：“StatusDateTime”}，
/*仅用作JobNo列中一个图像的评估字段*/
{“mDataProp”：“hasaattachments”，
“可搜索”：错误，
“可见”：假
},
/*仅用作JobNo列中一个图像的评估字段*/
{“mDataProp”：“已访问”，
“可搜索”：错误，
“可见”：假
},
/*仅用作JobNo列中一个图像的评估字段*/
{“mDataProp”：“已完成”，
“可搜索”：错误，
“可见”：假
},
/*只是隐藏，目前用户和应用程序都没有使用*/
{“mDataProp”：“JobStatusId”，
“可搜索”：错误，
“可见”：假
},
/*仅用作JobNo列中一个图像的评估字段*/
{“mDataProp”：“JobId”，
“可搜索”：错误，
“可见”：假
}
]
});
//INCOMING OBJECT FROM CLIENTSIDE
public class oaData
{
public string name { get; set; }
public string value { get; set; }
}
//RETURNING OBJECT TO CLIENTSIDE
public class oaData<T>
{
public int sEcho { get; set; }
public int iTotalRecords { get; set; }
public int iTotalDisplayRecords { get; set; }
public T aaData { get; set; }
public string sColumns { get; set; }
}
//THIS IS 'T' IN oaData<T>
public class JobOverviewDynamic
{
public int JobNo { get; set; }
public string JobStatusName { get; set; }
public string StatusDateTime { get; set; }
public bool HasAttachments { get; set; }
public bool Visited { get; set; }
public bool Completed { get; set; }
public int JobStatusId { get; set; }
public int JobId { get; set; }
}
//从客户端传入对象
公共类oaData
{
公共字符串名称{get；set；}
公共字符串值{get；set；}
}
//将对象返回到客户端
公共类oaData
{
public int sEcho{get；set；}
公共int iTotalRecords{get；set；}
公共int iTotalDisplayRecords{get；set；}
公共AAT数据{get；set；}
公共字符串sColumns{get；set；}
}
//这是oaData中的“T”
公共课
[WebMethod]
public static string getData(List<oaData> aoData)
{
/* The Columns array
* If the array from Parameters is not empty, then use that
*/
string[] aColumns = { "JobNo", "JobStatusName", "StatusDateTime", "HasAttachments", "Visited", "Completed", "JobStatusId", "JobId" };
var newCols = aoData.Where(n => n.name == "sColumns").Select(n => n.value).FirstOrDefault().Split(',');
aColumns = (newCols.Length == 1 && newCols[0] == "") ? aColumns : newCols;
/* Paging */
var iDisplayStart = aoData.Where(n => n.name == "iDisplayStart").Select(n => n.value).FirstOrDefault();
var iDisplayLength = aoData.Where(n => n.name == "iDisplayLength").Select(n => n.value).FirstOrDefault();
/* Ordering */
var sOrder = "";
var iSortCol_0 = aoData.Where(n => n.name == "iSortCol_0").Select(n => n.value).FirstOrDefault();
if (iSortCol_0 != null && aColumns.Length > 0)
{
sOrder = "ORDER BY ";
var iSortingCols = aoData.Where(n => n.name == "iSortingCols").Select(n => int.Parse(n.value)).FirstOrDefault();
for (int i = 0; i < iSortingCols; i++)
{
var iSortCol = aoData.Where(n => n.name == "iSortCol_" + i).Select(n => int.Parse(n.value)).FirstOrDefault();
var bSortable = aoData.Where(n => n.name == "bSortable_" + iSortCol).Select(n => bool.Parse(n.value)).FirstOrDefault();
if (bSortable)
{
var sSortDir = aoData.Where(n => n.name == "sSortDir_" + i).Select(n => n.value).FirstOrDefault();
sOrder += aColumns[iSortCol] + " " + sSortDir + ", ";
}
}
sOrder = sOrder.Trim();
sOrder = sOrder.Substring(sOrder.Length - 1) == "," ? sOrder.Substring(0, sOrder.Length - 1) : sOrder;
sOrder = (sOrder == "ORDER BY") ? "" : sOrder;
}
/* Filtering
*/
var sWhere = "";
var sSearch = aoData.Where(n => n.name == "sSearch").Select(n => n.value).FirstOrDefault();
var status = aoData.Where(n => n.name == "ddlStatus").Select(n => n.value).FirstOrDefault();
if (sSearch != "" && aColumns.Length > 0)
{
sWhere = "WHERE (";
for (int i = 0; i < aColumns.Count(); i++)
{
sWhere += aColumns[i] + " LIKE '%" + sSearch + "%'" + (i < aColumns.Count() - 1 ? " OR " : " ");
}
sWhere = sWhere.Trim() + ")";
}
/* Individual column filtering */
for (int i = 0; i < aColumns.Count(); i++)
{
var bSearchableCol = aoData.Where(n => n.name == "bSearchable_" + i).Select(n => bool.Parse(n.value)).FirstOrDefault();
var sSearchCol = aoData.Where(n => n.name == "sSearch_" + i).Select(n => n.value).FirstOrDefault();
if (bSearchableCol && sSearchCol != "")
{
sWhere = (sWhere == "") ? "WHERE " : sWhere + " AND ";
sWhere += aColumns[i] + " LIKE '%" + sSearchCol + "%' ";
}
/* Added this second if statement for my custom drop down filter on a specific column
* The fnFilter setting with a column number does not work, and this way, ColReorder will still work
*/
if (status != "" && aColumns[i] == "JobStatusName")
{
sWhere = (sWhere == "") ? "WHERE " : sWhere + " AND ";
sWhere += aColumns[i] + " = '" + status + "' ";
}
}
/* SQL queries
* Get data to display
*/
List<LTS.JobOverviewDynamicResult> data;
using (var m = new Methods())
{
//Im not giving my SQL query
data = m.getJobOverviewDynamicData(sWhere, sOrder, iDisplayStart, iDisplayLength);
}
int iFilteredTotal = 0;
int iTotal = 0;
if (data.Count() > 0)
{
/* Filtered dataset and Total dataset length */
iFilteredTotal = (int)data.FirstOrDefault().ITotalFiltered;
iTotal = (int)data.FirstOrDefault().ITotal;
}
/* Output */
var sEcho = aoData.Where(n => n.name == "sEcho").Select(n => int.Parse(n.value)).FirstOrDefault();
var output = new oaData<List<JobOverviewDynamic>>()
{
sEcho = sEcho,
iTotalRecords = iTotal,
iTotalDisplayRecords = iFilteredTotal,
aaData = data.Select(n => new JobOverviewDynamic()
{
JobNo = (int)n.JobNo,
JobStatusName = n.JobStatusName,
StatusDateTime = ((DateTime)n.StatusDateTime).ToString("yyyy-MM-dd hh:mm"),
HasAttachments = (bool)n.HasAttachments,
Visited = (bool)n.Visited,
Completed = (bool)n.Completed,
JobStatusId = (int)n.JobStatusId,
JobId = (int)n.JobId
}).ToList(),
sColumns = string.Join(",", aColumns)
};
return JsonConvert.SerializeObject(output);
}