Проблемы с заполнением пользовательских строк в таблице Bootstrap. NET

Question

Вот что происходит. У меня есть проект, который динамически создает таблицу в зависимости от того, сколько «групп» у пользователя. Каждый «GroupTable» скрыт или отображается через горизонтальные вкладки. «GroupTable» имеет записи или строки. Строки содержат текст и кнопки, которые взаимодействуют с остальной частью программы (например, Редактировать кнопку ввода рядом с заголовком записи)

Я строю эти записи и строки с помощью вызова Ajax через мой код C# , БД и выводит в список объектов. Строки строятся в JavaScript, добавляя текст var вручную к соответствующему «GroupTable»:

function PopulateListings(data) {


    $(data).each(function (index, obj) {
var tr = "<tr>" +

            "<td>" +
                obj.Title +
                "<button type='button' class='btn btn-default btn-sm' id='btnEditList" + obj.listID + "' onclick='editListing(" + obj.listID + ")'><span class='fa fa-edit' aria-hidden='true' ></span></button>"+
            "</td >" +

            "<td>" + obj.Username1 + "</td>" +
            "<td valign='middle'>" +
                "<div id='pwtext_" + obj.listID + "'><label valign='middle' style='padding-right: 10px'>********</label>" + 
                //"<button type='button' class='btn btn-default btn-sm' onclick='viewPassword(" + obj.listID + ")'><span class='fa fa-eye' aria-hidden='true'></span></button>" +
                "<button type='button' class='btn btn-primary btn-sm' onclick='copyPassword(" + obj.listID + ")'>Copy Password</button>" +
                "</div > " +

            "</td>" +

            "<td>" + obj.URL + "</td>" +

            "<td>" + obj.Username2 + "</td>" +

            "<td>" + obj.Notes_Short + "</td>" +

            "</tr>";
        var appendto = "#tablegroup_" + obj.groupID;
        $(appendto).append(tr);
 });

}

Это создаст строку для каждого пропущенного списка. «GroupTables» настроены так:

var tableheader2 = "<div id='" + obj.groupID + "'class='tabcontent' style='display: " + blockstyle + ";' > " +
            "<table data-toggle='table'  data-url='data1.json'  data-pagination='true' data-search='true' id='tableid" + obj.groupID + "' > " +
                "<thead>" +
                    "<tr>" +
                        "<th data-sortable='true'>Name/Title</th>" +
                        "<th>Username</th>" +
                        "<th>Password</th>" +
                        "<th>URL</th>" +
                        "<th>Username2</th>" +
                        "<th>Notes</th>" +
                    "</tr>" +
                "</thead>" +
            "<tbody id='tablegroup_" + obj.groupID + "' > </tbody> </table > </div > </div > ";


        $('#tablecontainer').append(tableheader2);

Так что все в порядке, но теперь я хочу реализовать Bootstrap Table (BT), чтобы иметь возможность по крайней мере сортировать данные. Теперь происходит то, что данные не загружаются в таблицу с помощью этой функции. Я хочу иметь возможность прикрепить мои предыдущие данные кодов к соответствующему tableID, а затем вызвать bootstrapTable (), чтобы добавить эту функциональность.

$(data).each(function (index, obj) {
                var table_id = "#tableid" + obj;
                $(table_id).bootstrapTable();
            });

Порядок действий кода следующий: 1.) Страница загрузки 2.) Группы загрузки 3.) Заполнение вкладок групп и пустых таблиц 4.) Загрузка записей в пустые таблицы 5.) Преобразование обычная таблица для bootstrapTable ()

Я испортил порядок операций? Должен ли я добавлять входные данные в другой элемент, чтобы он не удалялся go? прямо сейчас таблица выводит "Не найдено подходящих записей"

Answer 1

Хорошо, так что я думаю, что я нашел достойное решение, которое не требовало бы большого количества рефакторинга кода.

Часть моих проблем заключалась в том, что мне пришлось вручную установить группу

var table_id = "#tableid" + obj.groupID;
        $(table_id).bootstrapTable({
            search: true,
            sortable: true,
            pagination: false,
            columns: [{
                    field: 'Title',
                    title: 'Name/Title',
                    sortable: true,

                },
                {
                    field: 'Username1',
                    title: 'Main Username',
                    sortable: true
                },
                {
                    field: 'passwordPlain',
                    title: 'Password'
                },
                {
                    field: 'URL',
                    title:'URL'
                },
                {
                    field: 'Username2',
                    title: 'Email/Username2',
                    sortable: true
                },
                {
                    field: 'Notes_Short',
                    title: 'notes'
                }
                

            ]

        });

После слова я смог заполнить строки, добавив их и включив HTML объект

function PopulateListings2(data) {
    $(data).each(function (index, obj) {
        var arr = [
            {
                'Title': obj.Title + "<button type='button' class='btn btn-default btn-sm' id='btnEditList" + obj.listID + "' onclick='editListing(" + obj.listID + ")'><span class='fa fa-edit' aria-hidden='true' ></span></button>",
                'Username1': obj.Username1,
                'passwordPlain': "********",
                'URL': obj.URL,
                'Username2': obj.Username2,
                'Notes_Short': obj.Notes_Short

            }
        ];
        var $table = $('#tableid' + obj.groupID)
        $table.bootstrapTable('append', arr);
    });
    
}