Jquery Datatables Ajax方法单元格对齐

Posted 2023-02-24

【中文标题】Jquery Datatables Ajax方法单元格对齐

【英文标题】：Jquery Datatables Ajax method cell alignment

【发布时间】：2012-01-31 20:32:36

【问题描述】：

我正在使用数据表显示数据库表值。我正在使用 ajax 方法执行此操作。这是代码

$('#example1').dataTable( 
                "bProcessing": true,
                "sAjaxSource": "filename.php",
                "bJQueryUI": true,
                "sPaginationType": "full_numbers"

             );

filename.php 的输出是

 "aaData": [["1","<input type='checkbox' name='user'>&nbsp;Test Name","Leader","35"]]  

html代码是

<table cellpadding="0" cellspacing="0" border="0" class="display tablehead" id="example1">
              <thead>
                  <tr class="colhead newbg">
                    <th  align="center">No</th>
                    <th  align="left">User</th>
                    <th  align="left">Role</th>
                    <th  align="right">AGE</th>  
                  </tr>
                  </thead>
                    <tbody>

                    </tbody>
              </table>

在上面的 html 中，您可以看到第一列居中对齐，接下来的两列左对齐，最后一列右对齐。但是在输出的数据中，所有的都是中心对齐的。我尝试使用以下

 "aaData": [["<div align='center'>1</div>","<div align='left'><input type='checkbox' name='user'>&nbsp;Test Name</div>","<div align='center'>Leader</div>","<div align='right'>35</div>"]]  

现在我得到了正确的显示，但是按年龄排序时它不正确。请帮忙。谢谢

【参考方案1】：

现在我得到了正确的显示，但是按年龄排序时它不正确。请帮忙。谢谢

由于您在该列中有 HMTL，DataTables 会自动将其检测为“字符串”类型并相应地对其进行排序。如果您希望它按数字排序，剥离 HTML 数据，请使用此插件：http://datatables.net/plug-ins/sorting#numbers_html

【参考方案2】：

您不能将 DIV 元素附加到 TABLE 正文！ 您必须创建新的 TR 元素，将所有 DIV 更改为 TD，然后将它们附加到 TR 元素 ant，然后将 TR 元素附加到 TABLE 主体。

UPDATE DIV 元素没有属性 align，你必须使用 CSS。

【讨论】：

根据数据表，我希望这些元素会自动放置在 tds 中。所以我需要一种方法来对齐它们。谢谢

他可以这样做，但如果他这样做，那么排序将不起作用（除非他去掉 html。我认为您可以通过数据表 API 使用类来做他想做的事情

【参考方案3】：

我认为你应该这样做（使用aoColumns）：

$('#example1').dataTable( 
                "bProcessing": true,
                "sAjaxSource": "filename.php",
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
            "aoColumns": [ 
                        "sClass": "center",
                        "sClass": "left",
                        "sClass": "left",
                        "sClass": "right",

             );

然后定义正确的 CSS 类

.right
  align: right;


.left
  align: left;


.center
  align: center;

以这种方式，数据表处理将类附加到元素并且排序正常工作。当然使用第一个 JSON

【讨论】：

太棒了。我会试试这个，让你知道。谢谢

@Vasanthan.R.P 我还发布了一个链接，您可以在其中找到 aoColumns 的文档