对于练习，我试图将JSOn数据显示在我的aspx网页中的数据表中，但是数据表仍然存在 processing 这个词。当我检查控制台时，错误是无法读取属性＆＃39;长度＆＃39;未定义的
这个错误是什么意思？我如何解决它？这是错误，因为我的方法错了吗？
我做的是，首先我制作了一个.aspx.cs文件，只要调用它的URL就生成JSON字符串：
[{"NickName":"Bob","LogIN":"6/7/1846 12:00:00 AM","LogOUT":"6/7/1846 12:00:00 AM"},{"NickName":"Bob","LogIN":"6/6/1846 12:00:00 AM","LogOUT":"6/6/1846 12:00:00 AM"},{"NickName":"Patrick","LogIN":"6/7/1846 12:00:00 AM","LogOUT":"6/7/1846 12:00:00 AM"},{"NickName":"Ward","LogIN":"6/7/1846 12:00:00 AM","LogOUT":"6/7/1846 12:00:00 AM"},{"NickName":"Ward","LogIN":"6/6/1846 12:00:00 AM","LogOUT":"6/6/1846 12:00:00 AM"},{"NickName":"Ward","LogIN":"6/5/1846 12:00:00 AM","LogOUT":"6/5/1846 12:00:00 AM"},{"NickName":"Krabs","LogIN":"","LogOUT":""},{"NickName":"Sandy","LogIN":"","LogOUT":""},{"NickName":"Pearl","LogIN":"","LogOUT":""}]
然后在我的.aspx文件中，我应该显示数据表， 我写了这个脚本，这是dataTables site：
的建议 /*using the ajax function*/
var tbl = $('#datatableJSONEx').DataTable({
processing: true,
serverSide: true,
info: true,
ajax: "DefaultJSONResult?THEstr=produceJSON",
order: [[0, 'desc']],
select: true,
responsive: true,
buttons: true,
length: 10
});
然后我在HTML中添加了它的表示形式：
<div>
<table id="datatableJSONEx" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>NickName</th>
<th>LogIN</th>
<th>LogOUT</th>
</tr>
</thead>
<tfoot>
<tr>
<th>NickName</th>
<th>LogIN</th>
<th>LogOUT</th>
</tr>
</tfoot>
</table>
</div>
</div>
导致错误的原因是什么？当错误得到解决时，如果我希望我的表在服务器发生更改时自动更新，这种方法是否正确？
修改
我在dataTables jQuery中更改了这个属性：
ajax: "DefaultJSONResult?THEstr=produceJSON"
成
ajax: $.ajax("DefaultJSONResult?THEstr=produceJSON")
然而，它仍然显示处理..当我检查谷歌浏览器中的元素时，我在控制台上看不到任何内容。
更新
我更改了我的jQuery以使$.ajax()将我的url转换为对象，然后将其传递到数据表的ajax:属性中：
var jqxhr = $.ajax("DefaultJSONResult?THEstr=ProduceJSON",
{
success: function (data, status, xhr) { //on success
$('p').append(status);
},
error: function (jqXhr, textStatus, errorMessage) { //the action was a failure, know why.
$('p').append('ERROR: ' + errorMessage);
}
});
/*using the ajax function*/
var tbl = $('#datatableJSONEx').DataTable({
processing: true,
serverSide: true,
info: true,
ajax: jqxhr,
sAjaxDataProp : "",
columns: [
{ data: 'NickName'},
{ data: 'TimeIN' },
{ data: 'TimeOUT' }
],
order: [[0, 'desc']],
select: true,
responsive: true,
buttons: true,
length: 10
});
元素p现在返回SUCCESS并且控制台显示没有错误。但仍然数据表没有返回任何内容...是返回原因的.aspx url的JSON字符串？如何使Jquery Datatables符合我的格式？什么是正确的格式？
答案 0 :(得分：1)
试试这个：
$(document).ready(function() {
var dataSet = [];
dataSet.push(
[1,"Sasha","Brenna","0800 1111"],
[2,"Sage","Mia","(01012) 405872"],
[3,"Chelsea","Allistair","076 0578 0265"],
[4,"Uta","Savannah","070 1247 5884"],
[5,"Remedios","Berk","0995 181 0007"],
[6,"Ruby","Wayne","0800 1111"],
[7,"Faith","Fredericka","(01709) 099879"],
[8,"Myra","Harrison","070 4241 9576"],
[9,"Drake","Miriam","0800 733635"],
[10,"Reed","Shannon","076 8597 5067"]
);
$('#data_table').DataTable( {
data: dataSet,
});
在您的情况下，dataSet从ajax（）调用中获取其值。
答案 1 :(得分：1)
如果您使用dataset，则需要向datatable发送适当的server side datatable。以下是使用server side datatable
asp.net的工作示例
[WebMethod]
[System.Web.Script.Services.ScriptMethod(UseHttpGet = true)]
public static DataTableData GetData()
{
List<string[]> list = new List<string[]>();
DataTableData data = new DataTableData();
data.data = new List<string[]>();
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "1" });
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "2" });
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "3" });
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "4" });
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "5" });
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "6" });
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "7" });
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "8" });
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "9" });
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "10" });
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "11" });
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "12" });
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "13" });
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "14" });
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "15" });
list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "16" });
int start = 0;
int length = 0;
int draw = 0;
int.TryParse(HttpContext.Current.Request.QueryString["start"].ToString(), out start);
int.TryParse(HttpContext.Current.Request.QueryString["length"].ToString(), out length);
int.TryParse(HttpContext.Current.Request.QueryString["draw"].ToString(), out draw);
data.draw = draw;
var filter = list.Skip(start).Take(length).ToList();
data.data = filter;
data.recordsFiltered = list.Count;
data.recordsTotal = list.Count;
return data;
}
public class DataTableData
{
public int draw { get; set; }
public int recordsTotal { get; set; }
public int recordsFiltered { get; set; }
public List<string[]> data { get; set; }
}
这是数据表定义
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>ID</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>ID</th>
</tr>
</tfoot>
</table>
答案 2 :(得分：0)
我能够使用Datatables的ajax属性输出表格。我只是按照此处的说明获取我的特定JSON字符串的格式。
JSON字符串
[{"NickName":"Bob","LogIN":"6/7/1846 12:00:00 AM","LogOUT":"6/7/1846 12:00:00 AM"},{"NickName":"Bob","LogIN":"6/6/1846 12:00:00 AM","LogOUT":"6/6/1846 12:00:00 AM"},{"NickName":"Patrick","LogIN":"6/7/1846 12:00:00 AM","LogOUT":"6/7/1846 12:00:00 AM"},{"NickName":"Ward","LogIN":"6/7/1846 12:00:00 AM","LogOUT":"6/7/1846 12:00:00 AM"},{"NickName":"Ward","LogIN":"6/6/1846 12:00:00 AM","LogOUT":"6/6/1846 12:00:00 AM"},{"NickName":"Ward","LogIN":"6/5/1846 12:00:00 AM","LogOUT":"6/5/1846 12:00:00 AM"},{"NickName":"Krabs","LogIN":"","LogOUT":""},{"NickName":"Sandy","LogIN":"","LogOUT":""},{"NickName":"Pearl","LogIN":"","LogOUT":""}]
HTML
<div class="col-md-4">
<h2>JQUERY Datagrid</h2>
<p>Free Datatables via Jquery. Data is produced via JSON data source. </p>
<div>
<table id="datatableJSONEx" class="display">
<thead>
<tr>
<th>NickName</th>
<th>LogIN</th>
<th>LogOUT</th>
</tr>
</thead>
<tfoot>
<tr>
<th>NickName</th>
<th>LogIN</th>
<th>LogOUT</th>
</tr>
</tfoot>
</table>
</div>
</div>
..和JS
var tbl = $('#datatableJSONEx').DataTable({
ajax: {
dataSrc: "",
url: "DefaultJSONResult?THEstr=produceJSON"
},
columns: [
{ data: 'NickName' },
{ data: 'LogIN' },
{ data: 'LogOUT' }
],
order: [[0, 'desc']],
select: true,
responsive: true,
buttons: true,
length: 10
});
//we set an interval so that grid automatically reloads every afer 10 secs.
setInterval(function () {
tbl.ajax.reload( null, false ); // ( null, false) so user paging is not reset on reload
}, 10000 ); //10 seconds!
（感谢Mayank在正确的方向上刺激我。我或多或少更清楚地知道ajax works的方式。我也能通过JSON.ajax() success返回值，但我最终决定上面的代码，因为我可以通过.ajax.reload()）