DataTables服务器端脚本的客户端脚本

Question

我正在为DataTables编写服务器端处理代码。我有一个UI页面，我收集所有用户输入，如开始/结束日期，令牌ID，批次ID等。现在我必须将这些值传递给后端脚本，并在UI页面中运行查询并将输出呈现给数据表。

所以我有JS代码来接受和验证用户输入，但我不知道如何调用/设置数据表的params来状态服务器端脚本。以下是我的脚本：

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); 
             } 
           }); 
       } 
     }); 
} 

当所有输入参数都被验证时，我调用'runreport'方法。我构造datastring就像查询字符串：token_id = xxxx & email_id=asdsad@jj.com & start_date = 1212121212 & end_date = 98989898但这些值不被传递？我得到以下错误：

k is undefined 
[Break On This Error] 

...Sorting=="undefined"&&typeof e.saved_aaSorting=="undefined")e.aaSorting[a][1]=k.... 

jquery....min.js (line 150) 

我们应该怎么做才能让DataTables结果从后端脚本生成？

我没有得到所需的结果输出？这是调用服务器端processg的DataTables功能的正确方法吗？

下面是我的Python代码转储静态结果集：

#!/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 

Answer 1

有多种方法可以做到这一点。 DataTables支持AJAX source，因此您可以编写一个脚本来输出一个json数组并将其传递给DataTables插件。您也可以仅使用PHP呈现该表。

我想通过那里的一些examples看看你可以传递数据到DataTables的其他方式。

Answer 2

aoData.push是你要找的。将此用于您的fnServerData回调，替换您想要传递的值的aoData.push中的名称和值。名称将是关键和价值将是价值，$ _REQUEST变量传递：

​​

为了测试它的工作，做出越来越Ajax请求简单地寄给你的$ _REQUEST的页面。你应该看到这些变量是其中的一部分。

回调的常见伴侣是添加一个按钮来刷新表格。这只是通过将以下内容绑定到刷新按钮上的点击处理程序完成的：

oTable.fnDraw(false); 

祝你好运。

Answer 3

下面是一些数据表和服务器端/客户端的我的C＃代码

你可以使用这个，如果你想将它转换为蟒蛇，我翻译这个从阿兰PHP例如

客户方：

/* 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 
     } 
    ] 
}); 

服务器端对象

//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; } 
} 

Populat E中的对象，然后用JSON库Newtonsoft它字符串化和返回 这里是我的Serverside集团法

[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); 
} 

我希望这是有点意义上说，如果不是 - 问我应协助。