Question

我正在使用Grails 2.4.2。和Grails的bootstrap数据表。除分页外，所有索引页面中的数据表都可以正常工作。它显示了所有相关的分页按钮，但没有分页。还有另一个div，其中paginate也显示和工作，但没有数据表？以下是我的尝试::

我的控制器索引::

def index(Integer max) {
    params.max = Math.min(max ?: 10, 100)
    respond Audio.list(params), model: [audioInstanceCount: Audio.count()]
}

我的索引视图[抱歉上传完整视图，但要表达] ::

 <html>
    <head>
        <meta name="layout" content="stream">
        <g:set var="entityName" value="${message(code: 'audio.label', default: 'Audio')}" />
        <title><g:message code="default.list.label" args="[entityName]" /></title>
        <script>
            $(document).ready(function() {
                $('#example').dataTable({
                    "sPaginationType": "full_numbers"
                });
            } );
        </script>
    </head>
    <body>
    <div class="buttons pull-right" style="margin-top: 5px;padding-right: 5px;">
        <a class="btn btn-primary" href="${createLink(controller: 'dashboard', action: 'homePageStream')}"><g:message code="default.home.label"/></a>
        <g:link class="btn btn-info" action="create"><g:message code="default.create.label" args="[entityName]" /></g:link>
    </div>

    <div id="list-audio" class="content scaffold-list" role="main">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h5><g:message code="default.list.label" args="[entityName]"/></h5>
            </div>

            <div class="panel panel-body">
                <g:if test="${flash.message}">
                    <div class="message" role="status">${flash.message}</div>
                </g:if>
                <div class="col-md-12">
                <table id="example" class="table table-bordered table-hover" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th>Title</th>
                        <th>Short Description</th>
                        <th>Stream Type</th>
                        <th style="text-align: center;">Total Download</th>
                        <th style="text-align: center;">Active</th>
                        <th style="text-align: center;">Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    <g:each in="${audioInstanceList}" status="i" var="audioInstance">
                        <tr class="${(i % 2) == 0 ? 'even' : 'odd'}">

                            <td>${fieldValue(bean: audioInstance, field: "title")}</td>

                            <td>${fieldValue(bean: audioInstance, field: "shortDesc")}</td>

                            <td>${fieldValue(bean: audioInstance, field: "streamType")}</td>

                            <td align="right">${fieldValue(bean: audioInstance, field: "downloadCount")}</td>

                            %{--<td><g:formatBoolean boolean="${audioInstance.isActive}"/></td>--}%
                            <g:if test="${audioInstance.isActive}">
                                <td align="center"><span class="glyphicon glyphicon-ok" title="Active"></span></td>
                            </g:if>
                            <g:else>
                                <td align="center"><span class="glyphicon glyphicon-remove-sign" title="In-Active"></span></td>
                            </g:else>

                            <td align="center">
                                <g:link class="actionLink" action="changeActiveStatus" id="${audioInstance.id}"><span class="glyphicon glyphicon-retweet" title="Change Status"></span></g:link>
                                <g:link class="actionLink" action="edit" id="${audioInstance.id}"><span class="glyphicon glyphicon-edit" title="Edit"></span></g:link>
                                <g:link class="actionLink" action="deleteRow" id="${audioInstance.id}"><span class="glyphicon glyphicon-remove" title="Delete"></span></g:link>
                            </td>

                        </tr>
                    </g:each>
                    </tbody>
                </table>
                    <div class="pagination">
                        <g:paginate total="${audioInstanceCount ?: 0}"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
</html>

这是我的分页图片，其中只显示按钮但不起作用::

pagination problem

修改

这是我的javascript＆gt;＆gt;

$('#example').dataTable({
    "sPaginationType": "full_numbers",
    "processing": true,
    "serverSide": true,
    "ajax": "${createLink(controller:'audio', action:'ajaxAudioList')}"
});

这是我的控制器操作＆gt;＆gt;

def ajaxAudioList(){
    def audioInstanceList = Audio.getAll()
    render audioInstanceList as JSON
}

这是我的表＆gt;＆gt;

<table id="example" class="table table-bordered table-hover" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Title</th>
            <th>Short Description</th>
            <th>Stream Type</th>
            <th style="text-align: center;">Total Download</th>
            <th style="text-align: center;">Active</th>
            <th style="text-align: center;">Action</th>
        </tr>
    </thead>                    
</table>

Answer 1

我已经创建了一个服务器端数据表的演示，我使用了数据表v1.10.7，以下是我的控制器

//This action just render the index view
def index(Integer max) {
    params.max = Math.min(max ?: 10, 100)
    render view: 'index'
}

/**
* This action is actually populating the user data in the data table.
* NOTE - datatable need JSON response and list in data key
* I have used projection to get the list of list that is required for
* datatable
**/
def getUsers() {
    String search = params["search[value]"]
    List userList = User.createCriteria().list([max: params.length ?: 10, offset: params.start ?: 0]) {
        if (search) {
            or {
                ilike('firstName', "%${search}%")
                ilike('lastName', "%${search}%")
                ilike('contactNumber', "%${search}%")
            }
        }

        projections {
            property('firstName')
            property('lastName')
            property('age')
            property('contactNumber')
        }
    }

    Map result = [draw: params.draw, recordsTotal: userList.totalCount, recordsFiltered: userList.totalCount, data: userList]
    render result as JSON
}

并查看 -

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
        <th>Contact Number</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
        <th>Contact Number</th>
    </tr>
    </tfoot>
</table>

<script type="text/javascript">
    var goForSearch;
    $(function () {
        $('#example').dataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "${g.createLink(controller: 'user', action: 'getUsers')}"
        });
    });
</script>

希望这有帮助。

注意 - 我已经编写了分页和搜索的代码。对于排序，您需要添加更多代码。使用params['order[0][column]']和params["order[0][dir]"]进行排序。

Answer 2

您可以尝试以下代码。

查看页面..

<table id="example" class="table table-bordered table-hover" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th>Title</th>
                    <th>Short Description</th>
                    <th>Stream Type</th>
                    <th style="text-align: center;">Total Download</th>
                    <th style="text-align: center;">Active</th>
                    <th style="text-align: center;">Action</th>
                </tr>
                </thead>
                <tbody>
                <g:each in="${dataReturn}" var="dataSet" status="i">
                    <tr class="${(i % 2) == 0 ? 'even' : 'odd'}">

                        <td>${dataSet[0]}</td>
                            <td>${dataSet[1]}</td>
                            <td>${dataSet[2]}</td>
                            <td align="right">${dataSet[3]}</td>
                            <td>${dataSet[4]}</td>

                        <td align="center">
                            <g:link class="actionLink" action="changeActiveStatus" id="${dataSet.DT_RowId}"><span class="glyphicon glyphicon-retweet" title="Change Status"></span></g:link>
                            <g:link class="actionLink" action="edit" id="${dataSet.DT_RowId}"><span class="glyphicon glyphicon-edit" title="Edit"></span></g:link>
                            <g:link class="actionLink" action="deleteRow" id="${dataSet.DT_RowId}"><span class="glyphicon glyphicon-remove" title="Delete"></span></g:link>
                        </td>

                    </tr>
                </g:each>
                </tbody>
            </table>

删除分页div。分页将由dataTable添加。使用以下javascript。

<script>
jQuery(function ($) {
        $('#example').dataTable({
                    "bAutoWidth": true,
                    "bServerSide": true,
                    "iDisplayLength": 10,
                    "deferLoading": ${totalCount?:0},
                    "sAjaxSource": "${g.createLink(controller: 'audio',action: 'ajaxAudioList')}",
                    "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                        if (aData.DT_RowId == undefined) {
                            return true;
                        }
                        $('td:eq(5)', nRow).html(getActionBtn(nRow, aData));
                        return nRow;
                    },
                    "aoColumns": [
                        null,
                        { "bSortable": false },
                        { "bSortable": false },
                        { "bSortable": false },
                        { "bSortable": false },
                        { "bSortable": false }
                    ]
                });

                $('#example').on('click', 'a.delete-reference', function (e) {
                    var selectRow = $(this).parents('tr');
                    var confirmDel = confirm("Are you sure?");
                    if (confirmDel == true) {
                        var control = this;
                        var referenceId = $(control).attr('referenceId');
                        jQuery.ajax({
                            type: 'POST',
                            dataType: 'JSON',
                            url: "${g.createLink(controller: 'audio',action: 'deleteRow')}?id=" + referenceId,
                            success: function (data, textStatus) {
                                $('#example').DataTable().ajax.reload();
                                alert("Deleted successfully");
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                            }
                        });
                    }
                    e.preventDefault();
                });
                $('#example').on('click', 'a.inactive-reference', function (e) {
                    //ajax code for Inactive row
                    e.preventDefault();
                });

                $('#example').on('click', 'a.edit-reference', function (e) {
                    //ajax code for edit row
                    e.preventDefault();
                });
        });
    function getActionBtn(nRow, aData) {
        var actionButtons = "";
        actionButtons += '<span class="col-md-4 no-padding"><a href="" referenceId="' + aData.DT_RowId + '" class="inactive-reference" title="Change Status">';
        actionButtons += '<span class="glyphicon glyphicon-retweet"></span></a></span>';
        actionButtons += '<span class="col-md-4 no-padding"><a href="" referenceId="' + aData.DT_RowId + '" class="edit-reference" title="Edit">';
        actionButtons += '<span class="glyphicon glyphicon-edit"></span></a></span>';
        actionButtons += '<span class="col-md-4 no-padding"><a href="" referenceId="' + aData.DT_RowId + '" class="delete-reference" title="Delete">';
        actionButtons += '<span class="glyphicon glyphicon-remove"></span></a></span>';
        return actionButtons;
}

在您的控制器中，您需要两个动作。索引操作最初将加载带有数据表的页面（如果存在，则为10行）和用于分页的列表操作。

class AudioController {

def audioService

def index() {
    LinkedHashMap resultMap = audioService.audioPaginateList(params)

    if (!resultMap || resultMap.totalCount == 0) {
        render(view: 'your_view_page', model: [dataReturn: null, totalCount: 0])
        return
    }
    int totalCount = resultMap.totalCount
    render(view: 'your_view_page', model: [dataReturn: resultMap.results, totalCount: totalCount])
}

def ajaxAudioList() {
    LinkedHashMap gridData
    String result
    LinkedHashMap resultMap =audioService.audioPaginateList(params)

    if(!resultMap || resultMap.totalCount== 0){
        gridData = [iTotalRecords: 0, iTotalDisplayRecords: 0, aaData: []]
        result = gridData as JSON
        render result
        return
    }
    int totalCount =resultMap.totalCount
    gridData = [iTotalRecords: totalCount, iTotalDisplayRecords: totalCount, aaData: resultMap.results]
    result = gridData as JSON
    render result
}
//other controller actions

最后在服务中添加audioService类

class AudioService {
static transactional = false

static final String[] sortColumns = ['id','title','shortDesc']
LinkedHashMap audioPaginateList(GrailsParameterMap params){
    int iDisplayStart = params.iDisplayStart ? params.getInt('iDisplayStart') : 0
    int iDisplayLength = params.iDisplayLength ? params.getInt('iDisplayLength') : 10
    String sSortDir = params.sSortDir_0 ? params.sSortDir_0 : 'desc'
    int iSortingCol = params.iSortCol_0 ? params.getInt('iSortCol_0') : 0
    //Search string, use or logic to all fields that required to include
    String sSearch = params.sSearch ? params.sSearch : null
    if (sSearch) {
        sSearch = "%" + sSearch + "%"
    }
    String sortColumn = getSortColumn(sortColumns,iSortingCol)
    List dataReturns = new ArrayList()
    def c = Audio.createCriteria()
    def results = c.list(max: iDisplayLength, offset: iDisplayStart) {
        and {
            //eq("activeStatus", ActiveStatus.ACTIVE)

        }
        if (sSearch) {
            or {
                ilike('title', sSearch)
                ilike('shortDesc', sSearch)
            }
        }
        order(sortColumn, sSortDir)
    }
    int totalCount = results.totalCount
    if (totalCount > 0) {
        String status
        results.each { Audio audioInstance ->
            if(audioInstance.isActive){
                status = "Active"
            }else {
                status = "Inactive"
            }
            dataReturns.add([DT_RowId: audioInstance.id, 0: audioInstance.title, 1: audioInstance.shortDesc,2: audioInstance.streamType,3: audioInstance.downloadCount, 4: status, 5:''])
        }
    }
    return [totalCount:totalCount,results:dataReturns]
}

public String getSortColumn(String [] sortColumns, int idx){
    if(!sortColumns || sortColumns.length<1)
        return 'id'
    int columnCounts = sortColumns.length
    if(idx>0 && idx<columnCounts){
        return sortColumns[idx]
    }
    return sortColumns[0]
}

}

希望它会帮助你

Answer 3

我已经解决了这个问题，不知道是对还是错，但对我有用。我只是跳过grails中的分页因为data-table正在这样做。所以我改变了控制器中的索引，它工作正常。更改如下::

def audioInstanceList = Audio.getAll()
    [audioInstanceList: audioInstanceList]

Bootstrap数据表分页仅显示按钮但不在Grails中工作

3 个答案: