使用 tablekit 对 AJAX 方法返回的表进行排序

Question

我正在从 ajax 调用返回一组结果，如下所示

<g:submitToRemote update="updateMe" action="getParams" asynchronus="false" value="Search" name="SearchButton" type="hidden"/>

这将该调用的结果放在 updateMe DIV 标记中。

现在，我实际上从我的控制器渲染一个表，如下所示：

render(view: 'ajaxResults', model:[results:resultRows])

其中 ajaxResults 是一个看起来像这样的模板：

        <div class="list">
            <h1>Query Results</h1>
            <table style="width: 80%; align: center;" class="sortable resizable">
                <thead>
                    <tr>                      
                        <th id="emp_name" class="sortfirstasc">Employee Name</th>
                        <th id="title">Title</th>
                        <th id="labor_grade">Labor Grade</th>
                        <th id="name">Hit</th>
                        <th id="total_exp">Experience (Yrs)</th>                      
                    </tr>
                 </thead>
                 <tbody>
                    <g:each in="${results}" status="i" var="search">
                        <tr>                      
                            <td><g:link controller="employee" action="edit" id="${search.id}">${search.emp_name?.encodeAsHTML()}</g:link></td>                              
                            <td>${search.title?.encodeAsHTML()}</td>
                            <td>${search.labor_grade?.encodeAsHTML()}</td>
                            <td>${search.name?.encodeAsHTML()}</td>
                            <td>${search.total_exp?.encodeAsHTML()}</td>                                                                                 
                        </tr>
                    </g:each>
                </tbody>


            </table>
        </div>
        <div class="paginateButtons">
            <g:paginate total="${Search.count()}" />
        </div>
    </div>

问题是 - 该表实际上不可排序。我正在尝试使用 tablekit，

<link rel="stylesheet" type="text/css" media="all" href="../css/tablekit.css" />        
<g:javascript library="tablekit"></g:javascript>

我认为问题是我插入了它，并且它没有重新渲染以给我排序的表。我怎样才能强迫这种情况发生？

Answer 1

我也在谷歌和其他地方搜索过这个，但什么也没找到......
但当我在其他地方广泛搜索后在 tablekit 网站的常见问题解答中找到答案时，很有趣！
常见问题解答只有两个，第二个是像我一样大多数人搜索的。
访问了解完整详情。
它说：

TableKit.reloadTable(tablename);

强制 TableKit 重新初始化。

希望这有帮助。

Answer 2

据推测，tablekit 在页面加载时执行一个操作，定位装饰元素并应用 JavaScript 方法。

使用 submitToRemote 标记上的 after 参数或 onComplete 事件来调用 JavaScript 函数以重新应用排序行为。

的内容

<g:submitToRemote ... after="reapplySortable">

类似于：和 js 中

<script>
  function reapplySortable() {
    TableKit.Sortable.init(table, {options});  
  }
</script>