Javascript ASPXURL生成一个JSON字符串，使用jQuery数据表_Javascript_C#_Jquery_Asp.net_Json

Javascript ASPXURL生成一个JSON字符串，使用jQuery数据表

javascript c# jquery asp.net json

Javascript ASPXURL生成一个JSON字符串，使用jQuery数据表,javascript,c#,jquery,asp.net,json,Javascript,C#,Jquery,Asp.net,Json,实际上，我试图在我的aspx网页中将JSOn数据显示到一个datatable中，但datatable被字处理卡住了。当我检查控制台时，错误是无法读取未定义的属性“length” 这个错误意味着什么？我怎么修理它？这个错误是因为我的错误方法吗我所做的是，首先我创建了一个.aspx.cs文件，每当调用它的URL时，它都会生成JSON字符串： [{"NickName":"Bob","LogIN":"6/7/1846 12:00:00 AM","LogOUT":"6/7/1846 12:00:00 A

实际上，我试图在我的aspx网页中将JSOn数据显示到一个datatable中，但datatable被字处理卡住了。当我检查控制台时，错误是无法读取未定义的属性“length”

这个错误意味着什么？我怎么修理它？这个错误是因为我的错误方法吗

我所做的是，首先我创建了一个.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文件中显示数据表，我写了这个脚本，它是在：

然后我添加了它在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>

元素

现在返回

SUCCESS

，并且控制台上没有显示错误。但数据表仍然没有返回任何内容。。。JSON字符串是返回原因的.aspx url吗？如何使Jquery数据表接受我的格式？正确的格式是什么？

试试这个：

$(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,
});

在您的示例中，数据集从ajax（）调用获取其值。

如果您使用的是

服务器端数据表

，则需要将适当的

数据集

发送到

数据表

。下面是使用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; }

 }

[WebMethod]
[System.Web.Script.Services.ScriptMethod（UseHttpGet=true）]
公共静态DataTableData GetData（）
{
列表=新列表（）；
DataTableData=新DataTableData（）；
data.data=新列表（）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“1”}）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“2”}）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“3”}）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“4”}）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“5”}）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“6”}）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“7”}）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“8”}）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“9”}）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“10”}）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“11”}）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“12”}）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“13”}）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“14”}）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“15”}）；
添加（新字符串[]{“Mairaj”、“Ahmad”、“Minhas”、“16”}）；
int start=0；
整数长度=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=过滤器；
data.recordsFiltered=list.Count；
data.recordsTotal=list.Count；
返回数据；
}
公共类DataTableData
{
公共int draw{get；set；}
public int recordsTotal{get；set；}
公共int记录过滤{get；set；}
公共列表数据{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>


名字
姓
位置
身份证件
名字
姓
位置
身份证件

我可以使用Datatables的属性输出表。我只是按照这里的说明来设置特定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>

（感谢Mayank向我指出了正确的方向。我或多或少对如何返回有了更清晰的认识。我还能够通过
JSON.ajax（）success
返回值，但我最终还是接受了上面的代码，因为有了它，我还可以通过
.ajax.reload（）
使网页变得生动。）
你有C中的model i mean class吗？它与datatables列相关吗？Datatable需要
对象数组
所以你必须发送
对象数组
而不是
json字符串
我明白了，system.Datatable算作对象数组吗？为了从数据库获取数据，我使用了（system.data.SQLClient），然后，为了将其输出为JSON字符串，我使用了Newtonsoft.JSON.No
JSON字符串
将不会填充您在
C#
中转换为
对象列表
，并发送该
列表
。谢谢，但这种方法意味着数据集被编码到页面中。如果我需要它来自数据库，该怎么办？请检查本例中的行数据集从ajax（）调用获取其值。在回答中详细说明。这到底是什么意思？很抱歉，我对这种方法非常陌生。您必须使用ajax或传统方法获取从数据库到数据集的值。我曾尝试使用类似以下函数的
ajax:$.ajax（）
函数
ajax:$.ajax（“DefaultJSONResult？THEstr=produceJSON”）
。。。但是，它仍然显示处理，控制台没有显示任何内容。给定一个包含JSON字符串的URL，您会怎么做？
[{"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":""}]

<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>

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!