Показать и скрыть jQuery столбцы DataTables динамически для динамически создаваемых таблиц GridView, используя событие OnDataBound, которое удаляет пустые столбцы

Question

Я понимаю, что в этом вопросе есть много, но я думаю, что все это необходимо для того, что я пытаюсь выполнить sh.

Отображение / динамическое скрытие столбцов с помощью jQuery DataTables довольно просто с помощью API: См .: пример Однако я не вижу примеров динамического отображения и скрытия столбцов для динамически создаваемых таблиц GridView / столбцы, где событие OnDataBound используется для скрытия неиспользуемых столбцов. Например, я не могу жестко кодировать HTML (используется для включения / выключения столбцов) с группой имен столбцов, если я не знаю, какие столбцы будут отображаться (когда некоторые столбцы скрыты, поскольку данных не существует). Итак, я предполагаю, что мне нужно будет динамически создать HTML с заполнителем? Будет ли этот процесс происходить в событии OnDataBound?

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

Вот пример моего события OnDataBound, которое скрывает неиспользуемые столбцы:

protected void tblAccount_DataBound(object sender, EventArgs e)
    {
        try
        {
            Boolean hasData = false;
            for (int col = 0; col < tblAccount.HeaderRow.Cells.Count; col++)
            {
                if (tblAccount.Columns[col] is HyperLinkField || tblAccount.Columns[col] is TemplateField)
                {
                    continue;
                }

                for (int row = 0; row < tblAccount.Rows.Count; row++)
                {
                    if (!String.IsNullOrEmpty(tblAccount.Rows[row].Cells[col].Text) && !String.IsNullOrEmpty(HttpUtility.HtmlDecode(tblAccount.Rows[row].Cells[col].Text).Trim()))
                    {
                        hasData = true;
                        break;
                    }
                }

                if (!hasData)
                {
                    tblAccount.HeaderRow.Cells[col].Visible = false;
                    for (int hiddenrows = 0; hiddenrows < tblAccount.Rows.Count; hiddenrows++)
                    {
                        tblAccount.Rows[hiddenrows].Cells[col].Visible = false;
                    }
                }

                hasData = false;
            }
        }
        catch (Exception ex)
        {

        }
    }

И сценарий:

$(document).ready(function () {
    var Table1 = $("[id*=tblAccount]").prepend($("<thead></thead>").append($("[id*=tblAccount]").find("tr:first"))).DataTable({
                    "paging": true,  
                });

                $('a.toggle-vis').on('click', function (e) {
                    e.preventDefault();

                    // Get the column API object
                    var column = Table1.column($(this).attr('data-column'));

                    // Toggle the visibility
                    column.visible(!column.visible());
                });
})

HTML для переключения столбцов будет выглядеть примерно так, но снова это должно быть сгенерировано динамически:

Toggle column: <a class="toggle-vis" data-column="0">Account Number</a> - <a class="toggle-vis" data-column="1">Account Status</a> - <a class="toggle-vis" data-column="2">Account Name</a> - <a class="toggle-vis" data-column="3">And so on</a> - <a class="toggle-vis" data-column="4">and so on</a>

Answer 1

Если вы хотите переключить видимость с помощью javascript, вы, вероятно, не должны скрывать OnDataBound. Вместо этого, OnDataBound, вы можете добавить ссылку на страницу (через добавление ее к повторителю, или литералу, или как угодно) для каждого столбца, а также, если столбец пуст и его необходимо скрыть, возможно, добавьте класс или какое-то свойство к нему. Затем напишите javascript, что при загрузке страницы будет искать любой столбец с этим свойством и скрывать его по умолчанию.