不顯示記錄超過1427

Question

我想從數據庫加載值到HTML表使用JSON和C＃.net。我沒有顯示超過1427的記錄，並顯示錯誤「意外的令牌<」。我在網上登記，但我無法得到結果。

在此先感謝

我曾嘗試：

// JSON

$(document).ready(function() { 
     bindData(); 
}); 

function bindData() { 
$.ajax({ 
    type: "POST", 
    url: "MyTestForm.aspx/getData", 
    data: "{}", 
    contentType: "application/json;charset=utf-8", 
    datatype: "jsondata", 
    async: "true", 
    success: function (response) { 

     var msg = eval('(' + response.d + ')'); 

     if ($('#tblResult').length != 0) { 
      $("#tblResult").remove(); 
     } 

     var table = "<table class='tblResult' id='tblResult'><thead><tr><th>Name</th><th>Address</th><th>Age</th><th>Action</th></tr></thead> <tbody>"; 

     for (var i = 0; i <= (msg.length - 1) ; i++) { 
      var row = "<tr>"; 
      row += '<td>' + msg[i].Name + '</td>'; 
      row += '<td>' + msg[i].Address + '</td>'; 
      row += '<td>' + msg[i].Age + '</td>'; 
      row += '<td><img src="edit.png" title="Edit Record." onclick="bindRecordToEdit(' + msg[i].Id + ')" /> '; 
      row += ' <img src="delete.png" title="Delete Record." onclick="deleteRecord(' + msg[i].Id + ')" /></td>'; 
      row += '</tr>'; 
      table += row; 

     } 

     table += "</tbody></table>"; 
     $('#divData').html(table); 
     $('#divData').slideDown("slow"); 

    }, 
    error: function (response) { 
     alert(response.status + ' ' + response.statusText); 
    } 
}); 

}

// C＃

[WebMethod] 
public static string bindRecordtoEdit(int id) 
{ 
    string data = string.Empty; 
    try 
    { 
     using (MyTestDatabaseEntities context = new MyTestDatabaseEntities()) 
     { 
      var obj = (from r in context.MstNewTests select r).ToList(); 
      JavaScriptSerializer serializer = new JavaScriptSerializer(); 
      data = serializer.Serialize(obj); 
     } 
     return data; 
    } 
    catch (Exception) 
    { 
     return data; 
    } 
} 

Answer 1

爲了解析您的JSON數據使用內置的JSON對象

var data = JSON.parse(input); 

這裏是你如何建立你的表，使用table，createTHead，insertRow()，insertCell和textContent一個例子。

function makeTable(input) { 
    "use strict"; 

    // Declare the used variables; 
    var table, thead, tbody, tr, data, td, img, i, length; 

    // Create the table element as an object, in plain javascript. 
    table = document.createElement('table'); 
    table.class = 'tblResult'; 
    table.id = 'tblResult'; 

    // Create a header, automatically inserted into the table. 
    thead = table.createTHead(); 

    // Create a row, automatically inserted into the thead. 
    tr = thead.insertRow(); 

    // Insert cells into the row. By using textContent it doesn't matter if 
    // the text has special charactes like <, > and &. It will be treated 
    // as text, not HTML. You will not get TH-elements here, but TD-elements 
    // but you can style "thead td" in CSS if you want it bold and centered. 
    tr.insertCell().textContent = 'Name'; 
    tr.insertCell().textContent = 'Address'; 
    tr.insertCell().textContent = 'Age'; 
    tr.insertCell().textContent = 'Action'; 

    // Create a tbody, automatically inserted into the table. 
    tbody = table.createTBody(); 


    length = input.length; // Get the length, only onte time. 
for (i = 0; i < length ; i=i+1) { 
    // Get the current data at one time. No need to use [i] on every row. 
    // Less typing and less chance to get it wrong. 
    data = input[i]; 

    // Creates a row, automatically linked to tbody. 
    tr = tbody.insertRow(); 

    // Insert the data into cells, as TEXT, not HTML. Doesn't matter 
    // what the content is. 
    tr.insertCell().textContent = data.Name; 
    tr.insertCell().textContent = data.Address; 
    tr.insertCell().textContent = data.Age; 

    // Creates a cell for your images. 
    td = tr.insertCell(); 

    img = new Image(); 
    img.src = 'edit.png'; 
    img.dataset.name = 'edit'; 
    img.dataset.value = data.id; 
    img.title = 'Edit Record'; 
    td.appendChild(img); // Add image to td 


    img = new Image(); 
    img.src = 'delete.png'; 
    img.dataset.name = 'edit'; 
    img.dataset.value = data.id; 
    img.title = 'Delete Record'; 
    td.appendChild(img); // Add image to td 

    } 

    // Instead of using a lot of eventhandlers, that will use a lot of 
    // memory and other resources, I use one eventhandler for everything. 
    // Yes, ONE. 
    table.addEventListener(
    'click', 
    function (event) { 
     var target = event.target; 

     // If if isn't an image, then return. 
     if (target.nodeName != 'IMG') return; 
     console.log(target); 

     switch(target.dataset.name) { 
     case 'edit': 
     yourEditFunction(target.dataset.value); 
     break; 
     case 'delete': 
     yourDeleteFunction(target.dataset.value); 
     break; 
     } 
    } 
); 
    return table; 
}; 

這當然是你自己的功能。我只是把他們列入了一個完整的例子。

function yourEditFunction(id) { 
    console.log('edit ', id) 
}; 

function yourDeleteFunction(id) { 
    console.log('delete ', id) 
}; 

Answer 2

試試jquery模板插件它很適合重複代碼。

<script id="trTemplate" type="text/x-jquery-tmpl"> 
      <tr> 
       {{each $data}} 
        <td>${Col}</td> 
       {{/each}} 
      </tr> 
</script> 


<table id="containerTable"> 
</table> 

在Ajax中添加此行成功將結果替換爲數據。

$('#trTemplate').tmpl(data).appendTo('#containerTable');