如何在数据表jquery中添加多行答案

【问题标题】：How to add multiple rows in datatables jquery如何在数据表jquery中添加多行
【发布时间】：2014-09-15 15:06:42
【问题描述】：

我使用了https://datatables.net/reference/api/rows.add%28%29 链接，但数据显示表格为[object,object]。如何将对象显示为字符串。我用过JSON.stringify(obj) 它也不起作用。

HTML

<table id="exampleTable">
 <thead>
  <tr>
   <th>Year</th>
   <th>Month</th>
   <th>Savings</th>
  </tr>
 </thead>
 <tbody>
   <tr>
    <td>2012</td>
    <td>January</td>
    <td>$100</td>
   </tr>
   <tr>
    <td>2012</td>
    <td>February</td>
    <td>$80</td>
   </tr>
 </table>

$('#addRows').click(); 

var table3 = $('#exampleTable').DataTable(); 

$('#addRows').on( 'click', function () { 
    table3.row.add(
       [ { "Year": "Tiger Nixon", "Month": "System Architect", "Savings": "$3,120" },
         {"Year": "Tiger Nixon", "Month": "System Architect", "Savings": "$3,120" }]
    ).draw(); 
});

【问题讨论】：

请出示您的代码
通过单击编辑将您的代码 n html 放入问题中，而不是在评论中
我已经添加了上面的问题，请刷新并检查

标签： jquery jquery-datatables datatables-1.10

【解决方案1】：

我在这个FIDDLE 中创建了两个样本。

如果你想在行中添加对象，你应该在你的数据表初始化中添加列：

var table3 = $('#exampleTable').DataTable({
    data:[{ "Year": "2012", "Month": "January", "Savings": "$100" },
      { "Year": "2012", "Month": "February", "Savings": "$80" }],
    columns:[{data: 'Year'},
        {data: "Month"},
        {data: "Savings"}]
});

但如果您不想这样做，您可以在行中使用下一个语法添加：

table4.rows.add(
   [[ "Tiger Nixon", "System Architect","$3,120" ],
     ["Tiger Nixon", "System Architect", "$3,120" ]]
).draw();

看fiddle，它的信息量更大。

【讨论】：

【解决方案2】：

我也遇到了这个问题 - 我发现文档不太清楚。当我传递我自己动态创建的对象数组时，他们在https://datatables.net/reference/api/rows.add() 上的示例不起作用。

为了让它工作，你必须在实例化 DataTables 时指定列的名称。

无论如何，以下是一个可行的解决方案。

var DataTable = $('#tableName').DataTable({
  iDisplayLength: 15,   // number of rows to display
  columns: [
    { data: 'id' },
    { data: 'name' },
    { data: 'car' },
  ]
});

// assume this is a dynamically created array of objects
var persons = [
  {
    id: 1,
    name: 'John',
    car: 'Mercedes',
  }, 
  {
    id: 2,
    name: 'Dave',
    car: 'BMW',
  }, 
  {
    id: 3,
    name: 'Ken',
    car: 'Jeep',
  },  
];

DataTable.rows.add(persons).draw();

【讨论】：

需要指定列对我来说是一个很大的问题，因为我在一个函数中初始化表并在另一个函数中更新数据。谢谢你的回答

【解决方案3】：

试试这个`

var data = [
  {id : 1, name : 'John'},
  {id : 2, name : 'Joe'},
  {id : 3, name : 'Mathan'},
  {id : 4, name : 'Mani'},
  {id : 4, name : 'Karthik'}
];

//初始化数据表

var DataTable = $('#tableName').DataTable({
 iDisplayLength: 15,  
 columns: [
 { data: 'id' },
 { data: 'name' },
 ]
});

DataTable.rows.add(data).draw();

【讨论】：

【解决方案4】：

我在 foreach 循环中返回一个视图，它返回多行。现在我将在数据表中追加数据表的所有功能。

仅当您获取 html 格式的数据并且仅是多行格式时才有效。

这是我的数据表

   $('#SurveyDetails').dataTable({
    "scrollY": "500px",
    "scrollX": true,
    "scrollCollapse": true,
    "paging": false,
    "jQueryUI": false,
    "searching": false,
    "autoWidth": false,      
 });

我在数据表的滚动上附加了 30 行。

关于 ajax 的成功：

   success: function (data) {
            if (!$.trim(data) == '') {

                data = data.replace(/^\s*|\s*$/g, '');
                data = data.replace(/\\r\\n/gm, '');
                var expr = "</tr>\\s*<tr";
                var regEx = new RegExp(expr, "gm");
                var newRows = data.replace(regEx, "</tr><tr");
                $("#SurveyDetails").DataTable().rows.add($(newRows)).draw();
             }

【讨论】：