Блог

Главная - Вопросы по программированию - Скрыть элементы в Datatables.net таблица, основанная на данных в другом столбце

Скрыть элементы в Datatables.net таблица, основанная на данных в другом столбце

#datatables

Вопрос:

У меня есть таблица данных, в которой я недавно перешел на использование подхода к источникам данных AJAX. Это доставляет удовольствие. Я добавил три кнопки в первый столбец (работает, без проблем), и теперь я хочу условно отобразить / скрыть третью кнопку на основе данных в другом столбце. Я не хочу отображать третью кнопку, если данные: PublishStatus = «Сдвиги не созданы»

Я посмотрел на: https://datatables.net/examples/basic_init/data_rendering.html

но я не могу понять, что нужно, чтобы приспособить это к моей ситуации, так как условие основано на колонке, отличной от той, которую я использую. Я мог бы увидеть, как это сделать, если бы поместил кнопку в колонку PublishStatus

 "ajax": "dt-data_list_wo.asp?mf=d",
        "columns": [
        {"data": "GUID" , render : function ( data, type, row, meta ) {
          return type === 'display'  ?
          '<span style="display: inline-block;"><form method="POST" action="requestwo.asp"><input type="hidden" name="itemGUID" value="'  data  '"/><input type="hidden" name="action" value="wodetails"  /><button type="submit" class="btn btn-fill btn-info" style="margin-right: 5px">Details</button></form></span><span style="display: inline-block;"><form method="POST" action="prepub.asp"><input type="hidden" name = "itemguid" value = "'   data   '"><input type="hidden" name="action" value="view"  /><input type="hidden" name="backlink" value="listwo.asp"/><button type="submit" class="btn btn-fill btn-warning" style="margin-right: 5px">View RS</button></form></span><span style="display: inline-block;"><form method="POST" action="prepub.asp"><input type="hidden" name = "itemguid" value = "'   data   '"><input type="hidden" name="action" value="publish_shifts"  /><button type="submit" class="btn btn-fill btn-danger">Publish</button></form></span>': data;
        }},
        { "data": "PublishStatus" },
        { "data": "orgname" },
        { "data": "woref" },
        { "data": "weeknum" },
        { "data": "startdate" },
        { "data": "client_po" },
        { "data": "work_desc" }
    ],

Комментарии:

1. Посмотрите на содержимое row переменной в вашей render функции. Который содержит все элементы данных в текущей строке (возможно, в вашем случае в виде массива объектов). Таким образом, в своей render функции вы можете расширить свою условную логику, чтобы ссылаться на row.PublishStatus нее . Используйте console.log( row ); для двойной проверки структуры данных строк.

2. Спасибо, это был как раз тот намек, который мне был нужен. Пересмотренный код размещен ниже

Ответ №1:

Итак, благодаря andrewjames, решение включало пару изменений в мой исходный код — я прокомментировал части, которые мешали ему работать, и предложение if с строкой.PublishStatus действительно сделал свое дело. Сделал мой уик-энд!

 "ajax": "dt-data_list_wo.asp?mf=d",
        "columns": [
        {"data": "GUID" , render : function ( data, type, row, meta ) {
          //return type === 'display' ?
          if (row.PublishStatus == "All shifts published" || row.PublishStatus == "No shifts created yet") {
          return '<span style="display: inline-block;"><form method="POST" action="requestwo.asp"><input type="hidden" name="itemGUID" value="'  data  '"/><input type="hidden" name="action" value="wodetails"  /><button type="submit" class="btn btn-fill btn-info" style="margin-right: 5px">Details</button></form></span><span style="display: inline-block;"><form method="POST" action="prepub.asp"><input type="hidden" name = "itemguid" value = "'   data   '"><input type="hidden" name="action" value="view"  /><input type="hidden" name="backlink" value="listwo.asp"/><button type="submit" class="btn btn-fill btn-warning" style="margin-right: 5px">View RS</button></form></span>'//: data;
          } else {
          return '<span style="display: inline-block;"><form method="POST" action="requestwo.asp"><input type="hidden" name="itemGUID" value="'  data  '"/><input type="hidden" name="action" value="wodetails"  /><button type="submit" class="btn btn-fill btn-info" style="margin-right: 5px">Details</button></form></span><span style="display: inline-block;"><form method="POST" action="prepub.asp"><input type="hidden" name = "itemguid" value = "'   data   '"><input type="hidden" name="action" value="view"  /><input type="hidden" name="backlink" value="listwo.asp"/><button type="submit" class="btn btn-fill btn-warning" style="margin-right: 5px">View RS</button></form></span><span style="display: inline-block;"><form method="POST" action="prepub.asp"><input type="hidden" name = "itemguid" value = "'   data   '"><input type="hidden" name="action" value="publish_shifts"  /><button type="submit" class="btn btn-fill btn-danger">Publish</button></form></span>'//: data;
            }
        }},
        { "data": "PublishStatus" },
        { "data": "orgname" },
        { "data": "woref" },
        { "data": "weeknum" },
        { "data": "startdate" },
        { "data": "client_po" },
        { "data": "work_desc" }
    ],
Метки: ,