Nano Hash - криптовалюты, майнинг, программирование

Datatables — храните скрытые данные в каждой строке и используйте их для рендеринга HTML.

Я потратил несколько часов, пытаясь понять, как это сделать. У меня есть массив объектов, содержащих данные относительно содержимого таблицы. Мои объекты не связаны со структурой таблицы (нет 1 свойства на столбец). Мне нужно сохранить объект в каждой строке, чтобы я мог использовать его в функции render.

К сожалению, я не могу предоставить примеры кода, так как все, что я пробовал, не сработало. Я не могу понять, как работают row().data() и render. Может ли кто-нибудь объяснить мне это на примере?

Допустим, есть ячейка, в которой я хочу создать div. Этот div будет зависеть от данных, которые state я бы сохранил в строке. Если он равен true, функция рендеринга сгенерирует <div class="success>Ok</div>, иначе она сгенерирует <div class="failure>No</div>.

jquery datatables jquery-datatables
22.05.2015

Ответы:


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>

22.05.2015
  • Есть ли способ, чтобы строка имела массив в качестве данных? Пробовал { data: ["nomclient", "idclient"], render: function(data, type, row, meta){ console.log(data); return 'ui' } } Но пишет, что данные не определены 25.05.2015
  • @Percee, переменная row в функции render содержит данные строки. 26.05.2015
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..