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

Question

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

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

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

Answer 1

请参阅下面的代码以获取示例。根据您的描述，我添加了“切换”按钮，用于切换初始数据集中不存在的新数据属性 state 的状态。

var data = [
   {
       "name": "Tiger Nixon",
       "position": "System Architect",
       "salary": "$320,800"
   },
   {
       "name": "Garrett Winters",
       "position": "Accountant",
       "salary": "$170,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>