值未填充到 grails 应用程序的 jquery 数据表中答案

【问题标题】：values are not populating in the jquery datatable for a grails application值未填充到 grails 应用程序的 jquery 数据表中
【发布时间】：2016-09-16 12:17:32
【问题描述】：

我正在从controller-action 获取值列表以加载到data-table。我检查了值是否已成功从我的控制器操作中获取，但这些值没有加载到data-table .它显示了

没有可用的数据

这是我的控制器。

package com.standout.utilityapplication
import grails.plugin.springsecurity.annotation.Secured

@Secured(['ROLE_ADMIN'])
class ReportController {
	AdminService adminService
    def report() { 
		
		println ("--Inside ReportController");
	}
	def searchAjax(){
		String criteria = params.search_criteria
		println ("criteria "+criteria)
		if(criteria.equalsIgnoreCase("Employee ID")){
		def resultSet = adminService.getReportById(params)	
		println("----------------+++++ "+resultSet)
		[bill_details:resultSet]
		}
		
}
}

这是我的 GSP。

<html>
<head>
   <title>Report</title>
   <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.jqueryui.min.css"/>
   <script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.js"></script>
   <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
   <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.jqueryui.min.js"></script>
<script>
function displayTable(){
	$(function() {
    $('#example').DataTable();
	})
	document.getElementById('reportSearch').style.display = ''
	
}
	</script>
</head>
<body>
<g:formRemote name="billSearchForm" class="form-horizontal" onComplete="displayTable()" url="[controller: 'Report', action:'searchAjax']">
<div id="reportSearch" style="border-bottom: 1px solid;display:none;padding-right:45px;" class="col-sm-9">
<br/>
<br/>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Employee Id</th>
                <th>Bill Date</th>
                <th>Amount</th>
                <th>No. of Persons</th>
                <th>Bank Submission Date</th>
                <th>Bank Submission Status</th>
                <th>Bill Date</th>
                <th>Reimbursed</th>
                <th>Restaurant Name</th>
                <th>Team</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Employee Id</th>
                <th>Bill Date</th>
                <th>Amount</th>
                <th>No. of Persons</th>
                <th>Bank Submission Date</th>
                <th>Bank Submission Status</th>
                <th>Bill Date</th>
                <th>Reimbursed</th>
                <th>Restaurant Name</th>
                <th>Team</th>
            </tr>
        </tfoot>
        <tbody>
        <g:each in="${bill_details}" var="it">
            <tr>
                <td>${it.employee_id}</td>
                <td>${it.bill_submitted_dt}</td>
                <td>${it.amount}</td>
                <td>${it.number_of_persons}</td>
                <td>${it.presented_bank_dt}</td>
                <td>${it.presented_bank_fl}</td>
                <td>${it.receipt_dt}</td>
                <td>${it.reimbursed}</td>
                <td>${it.restaurant_name}</td>
                <td>${it.team}</td>
            </tr>
            </g:each>
        </tbody>
    </table>
<br/>
<br/>
</div>
</g:formRemote>
</body>
  </html>

谁能告诉我该怎么做？

【问题讨论】：

所以在控制器中打印时，数据没问题，对吧？如果您只是在 gsp 中将其打印出 ${bill_details.size()} 会怎样？它显示了什么？
我认为你的 gsp / jquery 代码有问题。

标签： jquery grails datatables

【解决方案1】：

请尝试使用以下代码片段。

html-table 来自gsp 文件的内容您可以根据自己的意愿将其他自定义内容添加到表格中。

              <table id="userDataTable" class="table table-bordered table-striped tableWidth dataTable">
                            <thead>
                            <tr>
                                <th>Branch Name</th>
                                <th>User Name</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Contact Number</th>
                            </tr>
                            </thead>
                        </table>

jquery 用于在data-table

中加载/填充数据的内容

var userDetailsDataTable = "";

userDetailsDataTableReload :  function(){

userDetailsDataTable = $('#userDataTable').DataTable();
userDetailsDataTable.destroy();

userDetailsDataTable = $('#userDataTable').DataTable({
    "ajax": '../restaurantManagement/fetchUserDetails'
});

}

从这里开始，我们调用控制器动作fetchUserDetails

controller-action内容

    Map userDetailsMap      =   [:]

    List userDetailsList    =   userManagementService.fetchAllUsersByRestaurantId(restaurantId)

    userDetailsMap << [data : userDetailsList]

    render userDetailsMap as JSON

如果有问题请告诉我。

【讨论】：

【解决方案2】：

您在使用 g:formRemote 时出错我不知道您的 grails 版本，但此链接为您提供了详细信息，您应该重视以下属性：update、onComplete

http://docs.grails.org/2.4.5/ref/Tags/formRemote.html

在您的情况下，我认为您应该使用 onComplete 事件因为在您的代码中您尝试显示 bill_details 但您不喜欢这样，所以在 ajax 调用期间对其进行评估，但不会在您的代码中自动替换。

使用 update 属性，您可以指定例如 div 标签的 id，其中将显示您的 ajax 调用的结果。

在您的情况下，您应该使用 onComplete 事件属性并以 JSON 格式返回 bill_details，如下所示：

def searchAjax(){
    ...
    def result = [bill_details:resultSet]
    render result as JSON
}

然后在您的 gsp 代码中指定 onComplete 属性，如下所示：

<g:formRemote name="billSearchForm" class="form-horizontal" onComplete="displayTable(data)" url="[controller: 'Report', action:'searchAjax']">

数据将允许您访问 ajax 调用的 JSON 结果

然后在您的 displayTable 中，您将能够迭代 JSON 数据 bill_details

【讨论】：