Javascript 不显示超过1427条记录

我试图使用JSON和C#.net将值从数据库加载到html表。我没有显示超过1427条记录，并显示错误“Unexpected token，以便使用内置对象解析JSON数据

下面是一个如何使用、和构建表的示例

---

试试jquery模板插件，它有利于重复代码

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


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

---

首先，使用

JSON.parse（数据）

而不是eval。第二，为什么不将表创建为DOM对象而不是字符串连接？我是JSON新手。请提供一些示例来说明错误：由于您使用eval和字符串连接，因此数据的格式很容易受到影响。例如，如果您的数据中有或-，if将破坏您的解析数据。

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

var data = JSON.parse(input);

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

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


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

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