如何将自定义sortFunction与grailsgui:datatable标记一起使用？

我在Grails中有一个datatable，其中有几个可排序的列。不幸的是，排序在默认情况下是区分大小写的，因此“Zed”显示在“alice”之前。所以我想添加一个自定义的不区分大小写的排序函数。我将以这种方式对username列进行排序

我已经在上阅读了有关排序和排序功能的内容，但似乎无法使其正常工作

我在list.gsp中添加了以下JavaScript：

var caseInsensitiveSortFunction = function(a, b, desc, field) {
    // See http://developer.yahoo.com/yui/datatable/ and look for 'sortFunction'
    // Set this function name as the sortFunction option
    // Deal with empty values
    if (!YAHOO.lang.isValue(a)) {
        return (!YAHOO.lang.isValue(b)) ? 0 : 1;
    } else if (!YAHOO.lang.isValue(b)) {
        return -1;
    }

    return YAHOO.util.Sort.compare(String(a).toLowerCase(), String(b).toLowerCase(), desc);
};

这是同一页上的datatable定义：

<gui:dataTable id="userTable"
    controller="user" action="listJSON"
    rowsPerPage="20"
    sortedBy="username"
    columnDefs="[
                [key:'username', label:'Username', resizeable: false, sortable: true, sortOptions: { sortFunction: 'caseInsensitiveSortFunction' }],
                [key:'email', label:'Email', resizeable: false, sortable: true],
                [key:'firstName', label:'First Name', resizeable: false, sortable: true],
                [key:'lastName', label:'Last Name', resizeable: false, sortable: true],
                [key:'enabled', label:'Enabled', resizeable: false, sortable: true],
                [key:'accountLocked', label:'Locked', resizeable: false, sortable: true],
                [key:'roleDescription', label:'Role', resizeable: false, sortable: true]
            ]"
    draggableColumns="true"
    rowClickNavigation="true"
    paginatorConfig="[
            template:'{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport}',
            pageReportTemplate:'{totalRecords} total record(s)',
            alwaysVisible:true,
            containers:'dt-paginator'
            ]"/>
<div id="dt-paginator" class="yui-skin-sam yui-pg-container"></div> 

这两种方法都创建了以下源代码。请注意，用户名的排序选项为空

            <div id="dt_div_userTable"></div> 
            <script> 
            YAHOO.util.Event.onDOMReady(function () {
                var DataSource = YAHOO.util.DataSource,
                    DataTable  = YAHOO.widget.DataTable,
                    Paginator  = YAHOO.widget.Paginator;

                var userTable_ds = new DataSource('/admin/gpupUser/listJSON?');
                userTable_ds.responseType   = DataSource.TYPE_JSON;
                userTable_ds.connMethodPost=true;
                userTable_ds.responseSchema = {
                    resultsList : 'results',
                    fields      : ["username","email","firstName","lastName","enabled","accountLocked","roleDescription","dataUrl"],
                    metaFields  : {
                        totalRecords: 'totalRecords'
                    }
                };
                userTable_ds.doBeforeCallback = function(oRequest, oFullResponse, oParsedResponse, oCallback) {
                    return GRAILSUI.util.replaceDateStringsWithRealDates(oParsedResponse);
                };

                var userTable_paginator = new Paginator(
                    {'template': '{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport}',
'pageReportTemplate': '{totalRecords} total record(s)',
'alwaysVisible': true,
'containers': 'dt-paginator',
'rowsPerPage': 20}
                );

                var registerEditorListener = function(editor, field, url,successCallback,failureCallback) {
                    editor.subscribe("saveEvent", function(oArgs) {
                        GRAILSUI.userTable.loadingDialog.show();
                        var editorCallback = {
                            success: successCallback,
                            failure: function(o) {
                                // revert the cell value
                                GRAILSUI.userTable.updateCell(oArgs.editor.getRecord(), field, oArgs.oldData);
                                // alert user
                                if (failureCallback)
                                  failureCallback(o);
                                else
                                  alert('Received an error during edit: ' + o.responseText);
                            }
                        };
                        YAHOO.util.Connect.asyncRequest('POST', url, editorCallback, 'id=' + oArgs.editor.getRecord().getData('id') + '&field=' + field + '&newValue=' + oArgs.newData);
                    });
                };



                var myColumnDefs = [{'key': 'username',
'label': 'Username',
'resizeable': false,
'sortable': true,
'sortOptions': }, {'key': 'email',
'label': 'Email',
'resizeable': false,
'sortable': true}, {'key': 'firstName',
'label': 'First Name',
'resizeable': false,
'sortable': true}, {'key': 'lastName',
'label': 'Last Name',
'resizeable': false,
'sortable': true}, {'key': 'enabled',
'label': 'Enabled',
'resizeable': false,
'sortable': true}, {'key': 'accountLocked',
'label': 'Locked',
'resizeable': false,
'sortable': true}, {'key': 'roleDescription',
'label': 'Role',
'resizeable': false,
'sortable': true}, {'key': 'dataUrl',
'type': 'dataDrillDown',
'hidden': true}];

                GRAILSUI.userTable = new GRAILSUI.DataTable('dt_div_userTable', myColumnDefs, userTable_ds, '', {
                    initialRequest         : 'max=20&offset=0&sort=username&order=asc&',
                    paginator              : userTable_paginator,
                    dynamicData            : true,
                    sortedBy               : {key: "username", dir: YAHOO.widget.DataTable.CLASS_ASC},
                    'draggableColumns': true,
'selectionMode': 'single',
'rowClickNavigate': false,
'rowClickMode': 'navigate',
'formatter': 'text'
                });
                // Update totalRecords on the fly with value from server
                GRAILSUI.userTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
                    oPayload.totalRecords = oResponse.meta.totalRecords;
                    return oPayload;
                };

                // Set up editing flow
                var highlightEditableCell = function(oArgs) {
                    var elCell = oArgs.target;
                    if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) {
                        this.highlightCell(elCell);
                    }
                };
                GRAILSUI.userTable.subscribe("cellMouseoverEvent", highlightEditableCell);
                GRAILSUI.userTable.subscribe("cellMouseoutEvent", GRAILSUI.userTable.onEventUnhighlightCell);
                GRAILSUI.userTable.subscribe("cellClickEvent", GRAILSUI.userTable.onEventShowCellEditor);
            });
            </script> 

<div id="dt-paginator" class="yui-skin-sam yui-pg-container"></div>

YAHOO.util.Event.onDOMReady（函数（）{
var DataSource=YAHOO.util.DataSource，
DataTable=YAHOO.widget.DataTable，
Paginator=YAHOO.widget.Paginator；
var userTable_ds=新数据源（'/admin/gpupUser/listJSON？'）；
userTable\u ds.responseType=DataSource.TYPE\u JSON；
userTable_ds.connMethodPost=true；
userTable\u ds.responseSchema={
结果列表：“结果”，
字段：[“用户名”、“电子邮件”、“名字”、“姓氏”、“启用”、“帐户锁定”、“角色说明”、“数据URL”]，
元字段：{
totalRecords:“totalRecords”
}
};
userTable_ds.doBeforeCallback=函数（oRequest、oFullResponse、oParsedResponse、oCallback）{
返回GRAILSUI.util.replaceDateStringsWithRealDates（oParsedResponse）；
};
var userTable_paginator=新的paginator(
{'template'：'{FirstPageLink}{PreviousPageLink}{PageLink}{NextPageLink}{LastPageLink}{CurrentPageReport}'，
“pageReportTemplate”：“{totalRecords}总记录”，
“alwaysVisible”：对，
“容器”：“dt paginator”，
“rowsPerPage”：20}
);
var registerEditorListener=函数（编辑器、字段、url、successCallback、failureCallback）{
editor.subscribe（“saveEvent”），函数（oArgs）{
GRAILSUI.userTable.loadingDialog.show（）；
var editorCallback={
成功：成功，
故障：功能（o）{
//还原单元格值
GRAILSUI.userTable.updateCell（oArgs.editor.getRecord（），字段，oArgs.oldData）；
//提醒用户
如果（失败回调）
故障回调（o）；
其他的
警报（'编辑期间收到错误：'+o.responseText）；
}
};
YAHOO.util.Connect.asyncRequest（'POST'，url，editorCallback，'id='+oArgs.editor.getRecord（）.getData（'id'）+'&field='+field+'&newValue='+oArgs.newData）；
});
};
var myColumnDefs=[{'key'：'username'，
“标签”：“用户名”，
“可调整大小”：false，
“可排序”：是，
'sortOptions'：}，{'key'：'email'，
“标签”：“电子邮件”，
“可调整大小”：false，
'sortable'：true}，{'key'：'firstName'，
“标签”：“名字”，
“可调整大小”：false，
'sortable'：true}，{'key'：'lastName'，
“标签”：“姓氏”，
“可调整大小”：false，
'sortable'：true}，{'key'：'enabled'，
“标签”：“已启用”，
“可调整大小”：false，
'sortable'：true}，{'key'：'accountLocked'，
“标签”：“已锁定”，
“可调整大小”：false，
'sortable'：true}，{'key'：'roleDescription'，
“标签”：“角色”，
“可调整大小”：false，
'sortable'：true}，{'key'：'dataUrl'，
'type'：'dataDrillDown'，
“隐藏”：true}]；
GRAILSUI.userTable=新的GRAILSUI.DataTable（'dt_div_userTable'，myColumnDefs，userTable_ds'{
initialRequest:'max=20&offset=0&sort=username&order=asc&'，
paginator:userTable_paginator，
是的，
排序方式：{key:“username”，dir:YAHOO.widget.DataTable.CLASS_ASC}，
“DragTableColumns”：true，
“selectionMode”：“single”，
“rowClickNavigate”：false，
“行单击模式”：“导航”，
“格式化程序”：“文本”
});
//使用来自服务器的值动态更新totalRecords
GRAILSUI.userTable.handleDataReturnPayload=函数（oRequest、OreResponse、oPayload）{
oPayload.totalRecords=oreponse.meta.totalRecords；
返回oPayload；
};
//设置编辑流
var highlightEditableCell=函数（oArgs）{
var elCell=桨。目标；
if（YAHOO.util.Dom.hasClass（elCell，“yui dt可编辑”））{
这是highlightCell（elCell）；
}
};
订阅（“cellMouseoverEvent”，highlightEditableCell）；
订阅（“cellMouseoutEvent”，GRAILSUI.userTable.onEventUnhighlightCell）；
订阅（“cellClickEvent”，GRAILSUI.userTable.OneEventShowCellEditor）；
});

---

有没有办法让datatable在配置为标记时使用自定义排序函数？

在

listJSON

操作中，将

ignoreCase:true

参数添加到

list（）

。看见这可能是唯一简单的方法

如果要支持分页，则不能将完全自定义的函数从Javascript级别推送到数据库级别—自定义函数将仅对当前页面进行排序，但分页将基于默认（按

id

）排序。换句话说，自定义函数只适用于不超过1页的表

你可以 <div id="dt_div_userTable"></div> <script> YAHOO.util.Event.onDOMReady(function () { var DataSource = YAHOO.util.DataSource, DataTable = YAHOO.widget.DataTable, Paginator = YAHOO.widget.Paginator; var userTable_ds = new DataSource('/admin/gpupUser/listJSON?'); userTable_ds.responseType = DataSource.TYPE_JSON; userTable_ds.connMethodPost=true; userTable_ds.responseSchema = { resultsList : 'results', fields : ["username","email","firstName","lastName","enabled","accountLocked","roleDescription","dataUrl"], metaFields : { totalRecords: 'totalRecords' } }; userTable_ds.doBeforeCallback = function(oRequest, oFullResponse, oParsedResponse, oCallback) { return GRAILSUI.util.replaceDateStringsWithRealDates(oParsedResponse); }; var userTable_paginator = new Paginator( {'template': '{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport}', 'pageReportTemplate': '{totalRecords} total record(s)', 'alwaysVisible': true, 'containers': 'dt-paginator', 'rowsPerPage': 20} ); var registerEditorListener = function(editor, field, url,successCallback,failureCallback) { editor.subscribe("saveEvent", function(oArgs) { GRAILSUI.userTable.loadingDialog.show(); var editorCallback = { success: successCallback, failure: function(o) { // revert the cell value GRAILSUI.userTable.updateCell(oArgs.editor.getRecord(), field, oArgs.oldData); // alert user if (failureCallback) failureCallback(o); else alert('Received an error during edit: ' + o.responseText); } }; YAHOO.util.Connect.asyncRequest('POST', url, editorCallback, 'id=' + oArgs.editor.getRecord().getData('id') + '&field=' + field + '&newValue=' + oArgs.newData); }); }; var myColumnDefs = [{'key': 'username', 'label': 'Username', 'resizeable': false, 'sortable': true, 'sortOptions': }, {'key': 'email', 'label': 'Email', 'resizeable': false, 'sortable': true}, {'key': 'firstName', 'label': 'First Name', 'resizeable': false, 'sortable': true}, {'key': 'lastName', 'label': 'Last Name', 'resizeable': false, 'sortable': true}, {'key': 'enabled', 'label': 'Enabled', 'resizeable': false, 'sortable': true}, {'key': 'accountLocked', 'label': 'Locked', 'resizeable': false, 'sortable': true}, {'key': 'roleDescription', 'label': 'Role', 'resizeable': false, 'sortable': true}, {'key': 'dataUrl', 'type': 'dataDrillDown', 'hidden': true}]; GRAILSUI.userTable = new GRAILSUI.DataTable('dt_div_userTable', myColumnDefs, userTable_ds, '', { initialRequest : 'max=20&offset=0&sort=username&order=asc&', paginator : userTable_paginator, dynamicData : true, sortedBy : {key: "username", dir: YAHOO.widget.DataTable.CLASS_ASC}, 'draggableColumns': true, 'selectionMode': 'single', 'rowClickNavigate': false, 'rowClickMode': 'navigate', 'formatter': 'text' }); // Update totalRecords on the fly with value from server GRAILSUI.userTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) { oPayload.totalRecords = oResponse.meta.totalRecords; return oPayload; }; // Set up editing flow var highlightEditableCell = function(oArgs) { var elCell = oArgs.target; if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) { this.highlightCell(elCell); } }; GRAILSUI.userTable.subscribe("cellMouseoverEvent", highlightEditableCell); GRAILSUI.userTable.subscribe("cellMouseoutEvent", GRAILSUI.userTable.onEventUnhighlightCell); GRAILSUI.userTable.subscribe("cellClickEvent", GRAILSUI.userTable.onEventShowCellEditor); }); </script> <div id="dt-paginator" class="yui-skin-sam yui-pg-container"></div>