Jquery для выполнения поиска и разбиения на страницы для загрузочных карт со связанными данными.

Question

Я пытаюсь выполнить поиск и разбиение на страницы для загрузочных карт, в которых данные связаны. Я знаю, как это сделать, используя udatatables, но вместо этого я хочу использовать карты.Ответы, которые я получил с помощью stackoverflow, не работали.

привязка данных к карточке

 public string BindCard_AssetReport(string main_group, string sub_group, string deptmnt, string empId)
{
    string ddlGroup = DDLAssetGroup.SelectedItem.Text;
    string ddlSubGrp = DDLAssetSubGroup.SelectedItem.Text;
    string ddlDept = DDLDepartment.SelectedItem.Text;
    string ddlUserCode = DDLUser.SelectedItem.Value;


    DataTable dtAsset = getAssetReportList(ddlGroup, ddlSubGrp, ddlDept, ddlUserCode, Session["firmcode"].ToString(), Session["ConnStr"].ToString());



    string str = "<div class='col-md-12'>";
    for (int i = 0; i < dtAsset.Rows.Count; i++)
    {
        str = str + "<div class='card-deck'>";
        str = str + "<div class='col-md-3'>";
        str = str + "<div class='card text-white bg-danger' >";
        str = str + "<div class='card-header text-center font-weight-bold'>" + "Code : ".ToString() + dtAsset.Rows[i].ItemArray[0].ToString() + " </div> ";
        str = str + " <div class='card-body'>";
        str = str + "<h5 class='card-title text-center font-weight-bold'>" + "Name : ".ToString() + dtAsset.Rows[i].ItemArray[1].ToString() + " </h5> ";
        str = str + "<ul class='list-group list-group-flush'>";
        str = str + "<li class='list-group-item list-group-flush'>  Group : " + dtAsset.Rows[i].ItemArray[2].ToString() + "</li>";
        str = str + "<li class='list-group-item list-group-flush'> Sub-Group : " + dtAsset.Rows[i].ItemArray[3].ToString() + "</li>";
        str = str + "<li class='list-group-item list-group-flush'> Department : " + dtAsset.Rows[i].ItemArray[4].ToString() + "</li>";
        str = str + "<li class='list-group-item list-group-flush'> Model : " + dtAsset.Rows[i].ItemArray[5].ToString() + "</li>";
        str = str + "</ul>";
        str = str + "</div>";
        str = str + "</div>";
        str = str + "</div>";
        str = str + "</div>";

    }
    str = str + "</div>";

    return str;
}

, где показываются карточки (страница ASPX)

<div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading clearfix">
                        <asp:Label ID="lblasset" <div class="col-sm-4">
                         <input type="search" placeholder="Start typing.." id="searchbox-input" name="search" class="form-control searchbox-input pull-left" >
                        <asp:Button ID="btnExport" class="btn btn-primary pull-right" runat="server" Text="Export to Excel" OnClick="btnExport_Click" />
                    </div>
                    <div class="panel-body">
                        <div class="col-md-12">
                            <div id="div_list" runat="server">
                            </div>
                        </div>


                    </div>
                </div>
            </div>

        </div>


    </div>

окно поиска

 <input type="search" placeholder="Start typing.." id="searchbox-input" name="search" class="form-control searchbox-input pull-left" >

Jquery функции, которые я попробовал.

функция 1

 $(document).ready(function () {
        $('#searchbox-input').on('keyup', function ()                
            $('.card').show();
            var filter = $(this).val(); // get the value of the input, which we filter on               
            $('#div_list').find(".card-title:not(:contains(" + filter + "))").parent().css('display', 'none');
        })
    });

функция 2

  $(document).ready(function () {
        $("#searchbox-input").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $("#div_list .card").filter(function () {
                $(this).toggle($(this).find('.card-title').text().toLowerCase().indexOf(value) > -1)
            });
        });
    });

функция 3

 $('#searchinput').keyup(function () {
            $('.card').removeClass('d-none');
            var filter = $(this).val(); // get the value of the input, which we filter on
            $('.card-deck').find('.card .card-body h5:not(:contains("' + filter + '"))').parent().parent().addClass('d-none');
        })

снимок экрана моей страницы

Данные на карточках взяты из упомянутой выше функции.

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