Render Datatables Boolean Column

Question

У меня есть данные, возвращающие данные, используя обработку на стороне сервера. Я не изменил базовый пример из таблиц данных.

У меня есть несколько булевых столбцов, которые я хочу отображать как значки, например. 1 = Зеленый тик 0 = красный крест или что-то подобное. В настоящее время он выглядит как this. Как я могу сделать рендеринг всего 3 столбца?

вот код, я пробовал, однако это приводит к целой таблице быть пустым ...

$(document).ready(function() { 
    $('#log').dataTable({ 
     "bProcessing": true, 
     "bServerSide": true, 
     "sAjaxSource": "assetlog.php" 
    "columns": [ 
      { "data": "id" }, 
      { "data": "assetcode" }, 
      { "data": "name"}, 
      { "data": "shift" } 
      { "data": "datetime" }, 
      { "data": "stop_production" }, 
      { "data": "furtheractions" } 
      { "data": "jobcomplete" }, 
      { "data": "duration" }, 
      ], 
      "columnDefs": [ 
         { 
          "render": function (data, type, row) { 
           return (data === true) ? '<span class="glyphicon glyphicon-ok"></span>' : '<span class="glyphicon glyphicon-remove"></span>'; 
          }, 
          "targets": 6 
         } 
        ] 

    }); 
}); 

Благодаря

Answer 1

columns и columnDefs являются избыточными; то есть то, что вы в настоящее время добавили в columnDefs shouls, просто зайдите в свой columns для тех, которые вы хотите иметь отметки. Он должен выглядеть следующим образом:

/*Note that I'm assuming you're using DT 1.10.x, so the 'b' in front of boolean options 
*is unnecessary, if you aren't using 1.10.x then go ahead and put those back in.*/ 
$(document).ready(function() { 
    $('#log').dataTable({ 
     "processing": true, 
     "serverSide": true, 
     "ajaxSource": "assetlog.php" 
     "columns": [ 
      { "data": "id" }, 
      { "data": "assetcode" }, 
      { "data": "name"}, 
      { "data": "shift" }, 
      { "data": "datetime" }, 
      /*Note that data == true instead of ===, if you have 1 or 0 it isn't === 
      (strictly equal) to true but it is == (evaluates to equal) to true*/ 
      { "data": "stop_production", 
      "render": function (data, type, row) { 
          return (data === true) ? '<span class="glyphicon glyphicon-ok"> 
          </span>' : '<span class="glyphicon glyphicon-remove"></span>';} 
      }, 
      { "data": "furtheractions", 
      "render": function (data, type, row) { 
          return (data == true) ? '<span class="glyphicon glyphicon-ok"> 
          </span>' : '<span class="glyphicon glyphicon-remove"></span>';} 
      }, 
      { "data": "jobcomplete", 
      "render": function (data, type, row) { 
          return (data == true) ? '<span class="glyphicon glyphicon-ok"> 
          </span>' : '<span class="glyphicon glyphicon-remove"></span>';} 
      }, 
      { "data": "duration" } 
     ] 
    }); 
}); 

Я сделал 3 изменения в свой код, 2, имеющих отношение к этому вопросу, и один просто обновить синтаксис. Важное 2 изменения:

• Переместить функцию render в каждую колонку, которую вы хотите, чтобы это поведение, вместо того, чтобы просто иметь его в резервируемой columnDefs
• Изменения data === true к data == true поскольку 1 не === правда, но == TRUE (=== для жестких сравнений, принимая во внимание типа)

И один менее релевантное изменение было:

• bProcessing и bServerSide должно быть processing и serverSide. Первый был устаревшим форматом для параметров DataTables, который использовал венгерскую нотацию, и поскольку у вас нет венгерской нотации для columns, вы должны использовать v1.10.x, который не нуждается в этой устаревшей нотации.

Примечание: Вы также упомянули, что вы получите пустую страницу, как только вы добавили опцию columns, но вы, кажется, не хватает запятой после data: shift, которые могли бы объяснить это.

Answer 2

Возможно, немного поздно, но на самом деле у меня была такая же проблема. Вот короткий код, чтобы заменить значения «1» и «0» зеленым Bootstrap клеща или красным крестом Bootstrap:

function remplacerBool(tableauID, boolClass) { 
    $(tableauID + ' tr').each(function (i, row) { 
    $('td', this).each(function (j, cell) { 
     if ($(tableauID + ' th').eq(j).hasClass(boolClass)) { 
     if (cell.innerHTML == '1') {cell.innerHTML = '<div class="text-center text-success"><span class="glyphicon glyphicon-ok-circle"></span></div>';} 
     if (cell.innerHTML == '0') {cell.innerHTML = '<div class="text-center text-danger"><span class="glyphicon glyphicon-remove-circle"></span></div>';} 
     } 
    }); 
    }); 
}; 

Все, что вам нужно сделать, это:

• точным в thtablehead какие столбцы должны получить определенный класс, если они содержат логические значения.Например, я использую <th class='bool'>
• вызов функции с двумя аргументами:
  • стол ID
  • имя класса функция должна признать булево