Javascript 如何使用“分离”分隔输出；onclick"；并将数据格式设置为每页20个？_Javascript_Html_Ajax_Jqgrid

Javascript 如何使用“分离”分隔输出；onclick"；并将数据格式设置为每页20个？

javascript html ajax jqgrid

Javascript 如何使用“分离”分隔输出；onclick"；并将数据格式设置为每页20个？,javascript,html,ajax,jqgrid,Javascript,Html,Ajax,Jqgrid,在文本框中输入内容后，如何格式化输出，使其看起来像这样到目前为止，我只是让它起作用：目前我可以点击回车键：并返回文本框中的每个“标题”：最终，我将更新我的代码，使其返回的不仅仅是“标题”，但目前它的工作原理如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https

在文本框中输入内容后，如何格式化输出，使其看起来像这样

到目前为止，我只是让它起作用：

目前我可以点击回车键：

并返回文本框中的每个“标题”：

最终，我将更新我的代码，使其返回的不仅仅是“标题”，但目前它的工作原理如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/css/ui.jqgrid.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/js/jquery.jqgrid.min.js"></script>
    <script>
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
    </script>
    <script crossorigin="anonymous"
            src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"
            integrity="sha256-GN28v8v0UEhIeH35OHeGh9LoP5liiKMRbiIFVQ5flTo="></script>
</head>
<body>
    <div style="margin-left:20px">
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#jqGrid").jqGrid({
                colModel: [
                    {
                        label: 'Id',
                        name: 'id',
                        width: 150
                    },
                    {
                        label: 'Title',
                        name: 'title',
                        width: 100
                    },
                    {
                        label: 'Code',
                        name: 'code',
                        width: 150
                    },
                    {
                        label: 'Original Url',
                        name: 'originalUrl',
                        width: 200
                    }
                ],

                viewrecords: true,
                width: 780,
                height: 200,
                rowNum: 20,
                datatype: 'JSON',
                pager: true,
                caption: "I really hope this works..."
            });

            fetchGridData();

            function fetchGridData() {

                var gridArrayData = [];
                // show loading message
                $("#jqGrid")[0].grid.beginReq();
                $.ajax({
                    url: 'api/codes',
                    type: 'GET',
                    //data: JSON.stringify(result),
                    success: function (result) {
                        for (var i = 0; i < result.items.length; i++) {
                            var item = result.items[i];
                            gridArrayData.push({
                                id: item.id,
                                title: item.title,
                                code: item.code,
                                originalUrl: item.originalUrl,
                            });
                        }
                        // set the new data
                        $("#jqGrid").jqGrid('setGridParam', { data: gridArrayData });
                        // hide the show message
                        $("#jqGrid")[0].grid.endReq();
                        // refresh the grid
                        $("#jqGrid").trigger('reloadGrid');
                    }
                });
            }
        });

    </script>
</body>
</html>

Javascript:

function getUrl() {

$("#getUrlResult").val("");
$.ajax({
    contentType: 'application/json',
    type: "GET",
    url: "api/codes",
    success: function (data, textStatus, jqXHR) {
        console.log(data);
        data.items.forEach(function (item) {
            $("#getUrlResult").val($("#getUrlResult").val() + item.title);
        });
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert('Nothing Found');
        console.log(errorThrown);
    }
});

}

HTML:

<body>
<h2>Get Data</h2>

<button onclick="getUrl()">Enter</button>

<input type="text" id="getUrlResult"/>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script src="javascripts/search.js"></script>
</body>

[HttpGet]
public async Task<IActionResult> Get([FromQuery] FilterShortUrlDto filter, string id)
{
    var su = await _repo.GetByFilter(filter); //search

    if (su == null)
        return NotFound();

    return Ok(su);
}

public async Task<PagedList<ShortUrl>> GetByFilter(FilterShortUrlDto filter)
{
    var fb = new FilterDefinitionBuilder<ShortUrl>();

    var fdefs = new List<FilterDefinition<ShortUrl>>();

    if (!string.IsNullOrWhiteSpace(filter.Search))
    {
        fdefs.Add(fb.Text(filter.Search));
    }

    if (!string.IsNullOrWhiteSpace(filter.Title))
    {
        fdefs.Add(fb.Eq(x=>x.Title, filter.Title));
    }

    int pageSize = 20, page = 1;
    int? skipCount = null;

    if (filter.PageSize == null)
    {
        pageSize = 20;
    }
    else
    {
        pageSize = filter.PageSize.Value;
    }

    if (filter.Page != null)
    {
        page = filter.Page.Value;

        if (filter.Page > 1)
        {
            skipCount = page * pageSize;
        }
    }

    var filt = fdefs.Count == 0
        ? fb.Empty
        : (fdefs.Count == 1 ? fdefs[0] : fb.Or(fdefs)); 


    var results = await _db.Urls
        .Find(filt)
        .Skip(skipCount)
        .Limit(pageSize + 1)
        .ToListAsync();

    return new PagedList<ShortUrl>(results, page, pageSize);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="css/styles.css">
    <title>Database</title>
    <link rel="stylesheet" crossorigin="anonymous"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
          integrity="sha256-Md8eaeo67OiouuXAi8t/Xpd8t2+IaJezATVTWbZqSOw=">
    <link rel="stylesheet" crossorigin="anonymous"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
          integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=">
    <link rel="stylesheet" crossorigin="anonymous"
          href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css"
          integrity="sha256-gY7w+ZzYjTPCx5Gx1YexizMJigg1YYwcQ3fAnWgAUTE=">
    <script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="></script>
    <!-- the next line need be uncommented if you need to use bootstrap.min.js -->
    <!--<script crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4="></script>
    <script crossorigin="anonymous" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
            integrity="sha256-xaF9RpdtRxzwYMWg4ldJoyPWqyDPCRD0Cv7YEEe6Ie8="></script>-->          
    <script>
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
    </script>
    <script crossorigin="anonymous"
            src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"
            integrity="sha256-GN28v8v0UEhIeH35OHeGh9LoP5liiKMRbiIFVQ5flTo="></script>
    <script>
        //<![CDATA[
        $(function () {
            "use strict";
            $("#grid1b").jqGrid({
                url: '/api/codes',
                dataType: 'JSON',
                data: { url: $('#grid1b').val() },
                type: 'GET',
                success: function (data, textStatus, jqXHR) {
                    console.log(data);
                    data.items.forEach(function (item) {
                        $("#grid1b").val($("#grid1b").val() + item.title);
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Nothing Found');
                    console.log(errorThrown);
                },    
                colModel: [
                    { name: "title", label: "Title", width: 100 },
                    { name: "id", label: "Id", width: 150, template: "number" },
                    { name: "code", label: "Code", width: 150, template: "number" },    
                    { name: "originalUrl", label: "Original Url", width: 200, firstsortorder: "desc" },
                    { name: "invdate", label: "Date", width: 75, align: "center", sorttype: "date",
                      formatter: "date", formatoptions: { newformat: "d-M-Y" }
                    },
                ],    
                guiStyle: "bootstrap4",
                iconSet: "fontAwesome",
                idPrefix: "gb1_",
                rownumbers: true,
                sortname: "invdate",
                sortorder: "desc",
                caption: "Search The Database",
                headertitles: true,
                toppager: true,
                pager: true,
                rowNum: 20,
                viewrecords: true,
            }).jqGrid("filterToolbar");
        });
    </script>    
</head>
<body>
<div align="center">
<table id="grid1b"></table>
</div>
    <script src="javascripts/search.js"></script>
</body>
</html>


获取数据
进入

控制器：

<body>
<h2>Get Data</h2>

<button onclick="getUrl()">Enter</button>

<input type="text" id="getUrlResult"/>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script src="javascripts/search.js"></script>
</body>

[HttpGet]
public async Task<IActionResult> Get([FromQuery] FilterShortUrlDto filter, string id)
{
    var su = await _repo.GetByFilter(filter); //search

    if (su == null)
        return NotFound();

    return Ok(su);
}

public async Task<PagedList<ShortUrl>> GetByFilter(FilterShortUrlDto filter)
{
    var fb = new FilterDefinitionBuilder<ShortUrl>();

    var fdefs = new List<FilterDefinition<ShortUrl>>();

    if (!string.IsNullOrWhiteSpace(filter.Search))
    {
        fdefs.Add(fb.Text(filter.Search));
    }

    if (!string.IsNullOrWhiteSpace(filter.Title))
    {
        fdefs.Add(fb.Eq(x=>x.Title, filter.Title));
    }

    int pageSize = 20, page = 1;
    int? skipCount = null;

    if (filter.PageSize == null)
    {
        pageSize = 20;
    }
    else
    {
        pageSize = filter.PageSize.Value;
    }

    if (filter.Page != null)
    {
        page = filter.Page.Value;

        if (filter.Page > 1)
        {
            skipCount = page * pageSize;
        }
    }

    var filt = fdefs.Count == 0
        ? fb.Empty
        : (fdefs.Count == 1 ? fdefs[0] : fb.Or(fdefs)); 


    var results = await _db.Urls
        .Find(filt)
        .Skip(skipCount)
        .Limit(pageSize + 1)
        .ToListAsync();

    return new PagedList<ShortUrl>(results, page, pageSize);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="css/styles.css">
    <title>Database</title>
    <link rel="stylesheet" crossorigin="anonymous"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
          integrity="sha256-Md8eaeo67OiouuXAi8t/Xpd8t2+IaJezATVTWbZqSOw=">
    <link rel="stylesheet" crossorigin="anonymous"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
          integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=">
    <link rel="stylesheet" crossorigin="anonymous"
          href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css"
          integrity="sha256-gY7w+ZzYjTPCx5Gx1YexizMJigg1YYwcQ3fAnWgAUTE=">
    <script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="></script>
    <!-- the next line need be uncommented if you need to use bootstrap.min.js -->
    <!--<script crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4="></script>
    <script crossorigin="anonymous" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
            integrity="sha256-xaF9RpdtRxzwYMWg4ldJoyPWqyDPCRD0Cv7YEEe6Ie8="></script>-->          
    <script>
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
    </script>
    <script crossorigin="anonymous"
            src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"
            integrity="sha256-GN28v8v0UEhIeH35OHeGh9LoP5liiKMRbiIFVQ5flTo="></script>
    <script>
        //<![CDATA[
        $(function () {
            "use strict";
            $("#grid1b").jqGrid({
                url: '/api/codes',
                dataType: 'JSON',
                data: { url: $('#grid1b').val() },
                type: 'GET',
                success: function (data, textStatus, jqXHR) {
                    console.log(data);
                    data.items.forEach(function (item) {
                        $("#grid1b").val($("#grid1b").val() + item.title);
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Nothing Found');
                    console.log(errorThrown);
                },    
                colModel: [
                    { name: "title", label: "Title", width: 100 },
                    { name: "id", label: "Id", width: 150, template: "number" },
                    { name: "code", label: "Code", width: 150, template: "number" },    
                    { name: "originalUrl", label: "Original Url", width: 200, firstsortorder: "desc" },
                    { name: "invdate", label: "Date", width: 75, align: "center", sorttype: "date",
                      formatter: "date", formatoptions: { newformat: "d-M-Y" }
                    },
                ],    
                guiStyle: "bootstrap4",
                iconSet: "fontAwesome",
                idPrefix: "gb1_",
                rownumbers: true,
                sortname: "invdate",
                sortorder: "desc",
                caption: "Search The Database",
                headertitles: true,
                toppager: true,
                pager: true,
                rowNum: 20,
                viewrecords: true,
            }).jqGrid("filterToolbar");
        });
    </script>    
</head>
<body>
<div align="center">
<table id="grid1b"></table>
</div>
    <script src="javascripts/search.js"></script>
</body>
</html>

[HttpGet]
公共异步任务Get（[FromQuery]FilterShortUrlDto filter，字符串id）
{
var su=await _repo.GetByFilter（filter）；//搜索
if（su==null）
返回NotFound（）；
返回Ok（su）；
}

存储库：

<body>
<h2>Get Data</h2>

<button onclick="getUrl()">Enter</button>

<input type="text" id="getUrlResult"/>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script src="javascripts/search.js"></script>
</body>

[HttpGet]
public async Task<IActionResult> Get([FromQuery] FilterShortUrlDto filter, string id)
{
    var su = await _repo.GetByFilter(filter); //search

    if (su == null)
        return NotFound();

    return Ok(su);
}

public async Task<PagedList<ShortUrl>> GetByFilter(FilterShortUrlDto filter)
{
    var fb = new FilterDefinitionBuilder<ShortUrl>();

    var fdefs = new List<FilterDefinition<ShortUrl>>();

    if (!string.IsNullOrWhiteSpace(filter.Search))
    {
        fdefs.Add(fb.Text(filter.Search));
    }

    if (!string.IsNullOrWhiteSpace(filter.Title))
    {
        fdefs.Add(fb.Eq(x=>x.Title, filter.Title));
    }

    int pageSize = 20, page = 1;
    int? skipCount = null;

    if (filter.PageSize == null)
    {
        pageSize = 20;
    }
    else
    {
        pageSize = filter.PageSize.Value;
    }

    if (filter.Page != null)
    {
        page = filter.Page.Value;

        if (filter.Page > 1)
        {
            skipCount = page * pageSize;
        }
    }

    var filt = fdefs.Count == 0
        ? fb.Empty
        : (fdefs.Count == 1 ? fdefs[0] : fb.Or(fdefs)); 


    var results = await _db.Urls
        .Find(filt)
        .Skip(skipCount)
        .Limit(pageSize + 1)
        .ToListAsync();

    return new PagedList<ShortUrl>(results, page, pageSize);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="css/styles.css">
    <title>Database</title>
    <link rel="stylesheet" crossorigin="anonymous"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
          integrity="sha256-Md8eaeo67OiouuXAi8t/Xpd8t2+IaJezATVTWbZqSOw=">
    <link rel="stylesheet" crossorigin="anonymous"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
          integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=">
    <link rel="stylesheet" crossorigin="anonymous"
          href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css"
          integrity="sha256-gY7w+ZzYjTPCx5Gx1YexizMJigg1YYwcQ3fAnWgAUTE=">
    <script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="></script>
    <!-- the next line need be uncommented if you need to use bootstrap.min.js -->
    <!--<script crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4="></script>
    <script crossorigin="anonymous" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
            integrity="sha256-xaF9RpdtRxzwYMWg4ldJoyPWqyDPCRD0Cv7YEEe6Ie8="></script>-->          
    <script>
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
    </script>
    <script crossorigin="anonymous"
            src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"
            integrity="sha256-GN28v8v0UEhIeH35OHeGh9LoP5liiKMRbiIFVQ5flTo="></script>
    <script>
        //<![CDATA[
        $(function () {
            "use strict";
            $("#grid1b").jqGrid({
                url: '/api/codes',
                dataType: 'JSON',
                data: { url: $('#grid1b').val() },
                type: 'GET',
                success: function (data, textStatus, jqXHR) {
                    console.log(data);
                    data.items.forEach(function (item) {
                        $("#grid1b").val($("#grid1b").val() + item.title);
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Nothing Found');
                    console.log(errorThrown);
                },    
                colModel: [
                    { name: "title", label: "Title", width: 100 },
                    { name: "id", label: "Id", width: 150, template: "number" },
                    { name: "code", label: "Code", width: 150, template: "number" },    
                    { name: "originalUrl", label: "Original Url", width: 200, firstsortorder: "desc" },
                    { name: "invdate", label: "Date", width: 75, align: "center", sorttype: "date",
                      formatter: "date", formatoptions: { newformat: "d-M-Y" }
                    },
                ],    
                guiStyle: "bootstrap4",
                iconSet: "fontAwesome",
                idPrefix: "gb1_",
                rownumbers: true,
                sortname: "invdate",
                sortorder: "desc",
                caption: "Search The Database",
                headertitles: true,
                toppager: true,
                pager: true,
                rowNum: 20,
                viewrecords: true,
            }).jqGrid("filterToolbar");
        });
    </script>    
</head>
<body>
<div align="center">
<table id="grid1b"></table>
</div>
    <script src="javascripts/search.js"></script>
</body>
</html>

公共异步任务GetByFilter（FilterShortUrlDto filter）
{
var fb=新的FilterDefinitionBuilder（）；
var fdefs=新列表（）；
如果（！string.IsNullOrWhiteSpace（filter.Search））
{
添加（fb.Text（filter.Search））；
}
如果（！string.IsNullOrWhiteSpace（filter.Title））
{
添加（fb.Eq（x=>x.Title，filter.Title））；
}
int pageSize=20，page=1；
int？skipCount=null；
if（filter.PageSize==null）
{
页面大小=20；
}
其他的
{
pageSize=filter.pageSize.Value；
}
如果（filter.Page！=null）
{
page=filter.page.Value；
如果（filter.Page>1）
{
skipCount=页面*页面大小；
}
}
变量filt=fdefs.Count==0
？fb.空的
：（fdefs.Count==1？fdefs[0]：fb.Or（fdefs））；
var results=await_db.url
.查找（筛选）
.Skip（skipCount）
.限制（页面大小+1）
.ToListAsync（）；
返回新的页面列表（结果、页面、页面大小）；
}

如您所见，我已将其设置为每页仅显示20个项目，我确信这是可行的：

我的最终目标是，通过根据文本框中输入的内容限制/组织数据，并以页面可以相应查看的顺序/格式输出数据，使浏览数据库变得更容易

更新

这是我运行时页面的外观：

jqGrid:

<body>
<h2>Get Data</h2>

<button onclick="getUrl()">Enter</button>

<input type="text" id="getUrlResult"/>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script src="javascripts/search.js"></script>
</body>

[HttpGet]
public async Task<IActionResult> Get([FromQuery] FilterShortUrlDto filter, string id)
{
    var su = await _repo.GetByFilter(filter); //search

    if (su == null)
        return NotFound();

    return Ok(su);
}

public async Task<PagedList<ShortUrl>> GetByFilter(FilterShortUrlDto filter)
{
    var fb = new FilterDefinitionBuilder<ShortUrl>();

    var fdefs = new List<FilterDefinition<ShortUrl>>();

    if (!string.IsNullOrWhiteSpace(filter.Search))
    {
        fdefs.Add(fb.Text(filter.Search));
    }

    if (!string.IsNullOrWhiteSpace(filter.Title))
    {
        fdefs.Add(fb.Eq(x=>x.Title, filter.Title));
    }

    int pageSize = 20, page = 1;
    int? skipCount = null;

    if (filter.PageSize == null)
    {
        pageSize = 20;
    }
    else
    {
        pageSize = filter.PageSize.Value;
    }

    if (filter.Page != null)
    {
        page = filter.Page.Value;

        if (filter.Page > 1)
        {
            skipCount = page * pageSize;
        }
    }

    var filt = fdefs.Count == 0
        ? fb.Empty
        : (fdefs.Count == 1 ? fdefs[0] : fb.Or(fdefs)); 


    var results = await _db.Urls
        .Find(filt)
        .Skip(skipCount)
        .Limit(pageSize + 1)
        .ToListAsync();

    return new PagedList<ShortUrl>(results, page, pageSize);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="css/styles.css">
    <title>Database</title>
    <link rel="stylesheet" crossorigin="anonymous"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
          integrity="sha256-Md8eaeo67OiouuXAi8t/Xpd8t2+IaJezATVTWbZqSOw=">
    <link rel="stylesheet" crossorigin="anonymous"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
          integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=">
    <link rel="stylesheet" crossorigin="anonymous"
          href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css"
          integrity="sha256-gY7w+ZzYjTPCx5Gx1YexizMJigg1YYwcQ3fAnWgAUTE=">
    <script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="></script>
    <!-- the next line need be uncommented if you need to use bootstrap.min.js -->
    <!--<script crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4="></script>
    <script crossorigin="anonymous" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
            integrity="sha256-xaF9RpdtRxzwYMWg4ldJoyPWqyDPCRD0Cv7YEEe6Ie8="></script>-->          
    <script>
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
    </script>
    <script crossorigin="anonymous"
            src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"
            integrity="sha256-GN28v8v0UEhIeH35OHeGh9LoP5liiKMRbiIFVQ5flTo="></script>
    <script>
        //<![CDATA[
        $(function () {
            "use strict";
            $("#grid1b").jqGrid({
                url: '/api/codes',
                dataType: 'JSON',
                data: { url: $('#grid1b').val() },
                type: 'GET',
                success: function (data, textStatus, jqXHR) {
                    console.log(data);
                    data.items.forEach(function (item) {
                        $("#grid1b").val($("#grid1b").val() + item.title);
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Nothing Found');
                    console.log(errorThrown);
                },    
                colModel: [
                    { name: "title", label: "Title", width: 100 },
                    { name: "id", label: "Id", width: 150, template: "number" },
                    { name: "code", label: "Code", width: 150, template: "number" },    
                    { name: "originalUrl", label: "Original Url", width: 200, firstsortorder: "desc" },
                    { name: "invdate", label: "Date", width: 75, align: "center", sorttype: "date",
                      formatter: "date", formatoptions: { newformat: "d-M-Y" }
                    },
                ],    
                guiStyle: "bootstrap4",
                iconSet: "fontAwesome",
                idPrefix: "gb1_",
                rownumbers: true,
                sortname: "invdate",
                sortorder: "desc",
                caption: "Search The Database",
                headertitles: true,
                toppager: true,
                pager: true,
                rowNum: 20,
                viewrecords: true,
            }).jqGrid("filterToolbar");
        });
    </script>    
</head>
<body>
<div align="center">
<table id="grid1b"></table>
</div>
    <script src="javascripts/search.js"></script>
</body>
</html>


数据库
$.jgrid=$.jgrid | |{}；
$.jgrid.no_legacy_api=true；
//

更新： 由于多次尝试将数据输出到jqGrid失败，我对上次更新的代码进行了几次更改

下面是我最好的朋友DNKROZ的建议：

我收到几个错误：

通过改变这一点，我设法发现：

<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../../../js/jquery.min.js"></script> 
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid-bootstrap.css" />
    <script>
        $.jgrid.defaults.width = 780;
        $.jgrid.defaults.styleUI = 'Bootstrap';
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <meta charset="utf-8" />
    <title>jqGrid Loading Data - JSON Live</title>
</head>


$.jgrid.defaults.width=780；
$.jgrid.defaults.styleUI='Bootstrap'；
jqGrid加载数据-JSON Live

进入我自己的上次更新的更新版本，如下所示：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/css/ui.jqgrid.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/js/jquery.jqgrid.min.js"></script>
    <script>
        $.jgrid = $.jgrid || {};
        $.jgrid.no_legacy_api = true;
    </script>
    <script crossorigin="anonymous"
            src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"
            integrity="sha256-GN28v8v0UEhIeH35OHeGh9LoP5liiKMRbiIFVQ5flTo="></script>
</head>
<body>
    <div style="margin-left:20px">
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#jqGrid").jqGrid({
                colModel: [
                    {
                        label: 'Id',
                        name: 'id',
                        width: 150
                    },
                    {
                        label: 'Title',
                        name: 'title',
                        width: 100
                    },
                    {
                        label: 'Code',
                        name: 'code',
                        width: 150
                    },
                    {
                        label: 'Original Url',
                        name: 'originalUrl',
                        width: 200
                    }
                ],

                viewrecords: true,
                width: 780,
                height: 200,
                rowNum: 20,
                datatype: 'JSON',
                pager: true,
                caption: "I really hope this works..."
            });

            fetchGridData();

            function fetchGridData() {

                var gridArrayData = [];
                // show loading message
                $("#jqGrid")[0].grid.beginReq();
                $.ajax({
                    url: 'api/codes',
                    type: 'GET',
                    //data: JSON.stringify(result),
                    success: function (result) {
                        for (var i = 0; i < result.items.length; i++) {
                            var item = result.items[i];
                            gridArrayData.push({
                                id: item.id,
                                title: item.title,
                                code: item.code,
                                originalUrl: item.originalUrl,
                            });
                        }
                        // set the new data
                        $("#jqGrid").jqGrid('setGridParam', { data: gridArrayData });
                        // hide the show message
                        $("#jqGrid")[0].grid.endReq();
                        // refresh the grid
                        $("#jqGrid").trigger('reloadGrid');
                    }
                });
            }
        });

    </script>
</body>
</html>


$.jgrid=$.jgrid | |{}；
$.jgrid.no_legacy_api=true；
$（文档）.ready（函数（）{
$（“#jqGrid”）.jqGrid({
colModel：[
{
标签：“Id”，
名称：“id”，
宽度：150
},
{
标签：“标题”，
姓名：'头衔'，
宽度：100
},
{
标签：“代码”，
名称：'代码'，
宽度：150
},
{
标签：“原始Url”，
名称：'originalUrl'，
宽度：200
}
],
viewrecords：是的，
宽度：780，
身高：200，
rowNum:20，
数据类型：“JSON”，
寻呼机：是的，
描述：“我真的希望这能奏效……”
});
fetchGridData（）；
函数fetchGridData（）{
var gridArrayData=[]；
//显示加载消息
$（“#jqGrid”）[0].grid.beginReq（）；
$.ajax({
url:'api/代码'，
键入：“GET”，
//数据：JSON.stringify（结果），
成功：功能（结果）{
对于（变量i=0；i


警告消失，我的输出现在如下所示：

我可能错了，但我确实相信我的控制器操作是返回JSON数据，以下是我对原因的理解：
使用Postman测试我的代码时，我会“获取”JSON：

即使我的get函数不“返回Json（su）；”如下所示：

此外，在使用Robo 3T I no查看数据库集合时