如何在 Liferay 自定义搜索容器中添加 DataTable

Question

我正在尝试使用 DataTable 在客户端将搜索和排序功能添加到我的 Liferay 搜索容器中，以获取数据。但是由于某种原因，它显示在我的 portlet 生成的数据之上，因此没有应用到 portlet 数据中。请注意，我没有使用任何 json 对象或从我的 java 代码呈现数据，它是构建容器然后显示在我的 view.jsp 页面上。这是一些代码：

     <liferay-ui:search-container delta="20" deltaConfigurable="<%= true %>" iteratorURL="<%=formDataUrl %>" total="<%=FormDataWrapperLocalServiceUtil.getFormDataWrappersCount() %>">

     <table id="userTable" class="display" cellspacing="0" width="100%">
     <thead>
            <tr>
                <th>Field1</th>
                <th>Field2</th>
                <th>Field3</th>
                <th>Field4</th>
            </tr>
    </thead>
 
<tbody>
      <liferay-ui:search-container-results results="<%=

我的Javascript代码：

<script>
 $(document).ready(function() {
                $('#userTable').DataTable();
            } );
 </script>

请让我知道我在这里做错了什么。提前致谢！

Answer 1

看起来有些 CSS 或 JS 冲突，但应该可以正常工作。

检查 DataTable 插件是否在 Web 控制台中打印了一些警告或错误，以帮助您查看缺少的内容。

Answer 2

好的，终于成功了！呸！ DataTable 命令在生成 table id 之前应用，因此必须将它们一个接一个地放在同一个脚本标签上。一切正常！

如何在 Liferay 自定义搜索容器中添加 DataTable

How to add DataTable in Liferay custom Search container

jsp

jsp-tags

liferay

liferay-aui

liferay-7