使用 grails 进行 Jquery 分页答案

【问题标题】：Jquery pagination with grails使用 grails 进行 Jquery 分页
【发布时间】：2020-10-28 10:38:50
【问题描述】：

您好，我正在使用 jquery 将我的数据查询回我的 index.gsp 文件，但我不确定如何使用它实现分页。下面将是一个工作代码，但没有分页。由于我使用 jquery 来查询数据，因此无法使用 grails 分页。有没有其他解决方案可以实现分页。这是我从数据库中获取数据的控制器代码：

  def index() {


        def customers=Customer.findAll()
        def cuscount=Customer.count
        render view:  'index', model: [cus:customers,customerCount:cuscount,searchQuery: '']

    }

这是我的 index.gsp 页面：

<body>
<div class="boxed">
    <h3>Social Integration</h3>
</div>
<div class = "container">

<div id="list-customer">

    <g:if test="${flash.message}">
        <div class="message" role="status">${flash.message}</div>
    </g:if>
    

    <div class = "row">
        <div class = "col-sm-6">
            <input id = "search" class= "form-control" onkeyup="getSearchRequest()" value="${searchQuery==null?'':searchQuery}" name = "search" type="text" placeholder="Search" aria-label="Search">

        </div>
        <div class = "col-sm-6">
            <g:link action="createCustomer"><button id = "add" class="btn btn-primary"><i id = "addicon" class="fa fa-plus" aria-hidden="true"></i>Add Customer</button></g:link>
        </div>

    </div>

    <table class="table table-bordered" id = "table">
        <colgroup>
            <col style="width:10%">
            <col style="width:25%">
            <col style="width:20%">
            <col style="width:25%">
            <col style="width:25%">
        </colgroup>
        <thead>
        <tr>
            <td style = column-width:10px;>Number</td>
            <td>Name</td>
            <td>Code</td>
            <td>Contact person</td>
            <td>Status</td>

        </tr>
        </thead>
        <tbody id="tableBody">

        </tbody>
    </table>

</div>
</div>
<script>


    function getSearchRequest() {
        $.ajax({

            url : '${createLink(action:'searchCustomerJSON')}',
            type : 'GET',
            data : {
                'search' : $('#search').val(),
            },
            dataType:'json',
            success : function(data) {
                var tableHtml='';
                var i=1;
                for(index in data)
                {
                    var tableData=data[index];
                    var id=tableData.id;
                    var code=tableData.code;
                    var contactPerson=tableData.contactPerson;
                    var status=tableData.status;
                    var name=tableData.name;
                    tableHtml+='<tr>' +
                        '<td>'+i+'</td>' +
                        '<td><a href="${createLink(action: 'showCustomerById')}/'+id+'">'+name+'</a></td>' +
                        '<td>'+code+'</td>' +
                        '<td>'+contactPerson+'</td>' +
                        '<td>'+status+'</td></tr>';
                        i++;

                }
                $('#tableBody').html(tableHtml);
            },
            error : function(request,error)
            {
                alert("Request: "+JSON.stringify(request));
            }
        });

    }
    getSearchRequest();

 



</script>
</body>

谁能帮助我如何实现jquery分页？非常感谢。

【问题讨论】：

标签： jquery grails groovy jquery-pagination

【解决方案1】：

您在寻找分页库吗？有很多，尝试搜索“jQuery 分页”之类的内容...这是一个示例：https://pagination.js.org/

这使用完全客户端分页，这可能不可行，具体取决于数据集的大小。您的代码正在加载数据库中的每个 Customer 并将该数据发送到浏览器。如果这不仅仅是一组样本数据，您将遇到问题。请考虑使用服务器端分页。

【讨论】：