数据表 - 在每一行中存储隐藏数据并使用它来呈现 HTML

Question

我花了几个小时试图找到一种方法来做到这一点。我有一个对象数组，其中包含与 table 的内容相关的数据。我的对象与 table 的结构无关（每列没有 1 属性）。我需要在每一行中存储一个对象，以便我可以在 render 函数中使用它。

抱歉，我无法提供代码示例，因为我尝试过的所有方法均无效。我无法理解 row().data() 和 render 的工作原理。谁能用一个例子向我解释这些？

假设有一个单元格，我想在其中生成 div。 div 取决于我存储在行中的数据 state。如果它在 true，渲染函数将生成 <div class="success>Ok</div>，否则它会生成 <div class="failure>No</div>。

Answer 1

示例请看下面的代码。根据您的描述，我添加了 "Toggle" 按钮，用于切换初始数据集中不存在的新数据属性 state 的状态。

var data = [
   {
       "name": "Tiger Nixon",
       "position": "System Architect",
       "salary": "0,800"
   },
   {
       "name": "Garrett Winters",
       "position": "Accountant",
       "salary": "0,750"
   }
];

$(document).ready( function () {
   // Initial state
   var g_stateInitial = true;
  
   var table = $('#example').DataTable({
      "data": data,
      "columns": [
         { "data": "name"},
         { "data": "position" },
         { "data": "salary"},
         { 
           "data": null, 
           "searchable":false,
           "render": function(data, type, row, meta){              
              var state = (data.hasOwnProperty('state')) ? data.state : g_stateInitial; 
              if(type === "display"){
                return (state) ? '<div class="success">OK</div>' : '<div class="failure">NO</div>';
              } else {
                return state;
              }
           }
         },
         { 
           "data": null, 
           "searchable":false,
           "render": function(data, type, row, meta){
              if(type === "display"){
                return '<button type="button" class="btn-toggle">Toggle</button>'
              }
              return data;
           }
         }
           
     ]
     
   });

   $('#example tbody').on('click', '.btn-toggle', function(){     
      var $row = $('#example').DataTable().row($(this).parents('tr'));
      var data = $row.data();
      data.state = (data.hasOwnProperty('state')) ? !data.state : !g_stateInitial; 

      $row
         .data(data)
         .invalidate()
         .draw(false);
   });
  
});

.success {
  color:#009900;
}

.failure {
  color:#990000;
}

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>

<table id="example" class="display" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Salary</th>
      <th>State</th>
      <th></th>
    </tr>
  </thead>
</table>

数据表 - 在每一行中存储隐藏数据并使用它来呈现 HTML

Datatables - Store hidden data in each row and use it to render HTML

jquery

datatables

jquery-datatables