Jquery Datatable 搜索框左对齐

Posted 2023-05-07

【中文标题】Jquery Datatable 搜索框左对齐

【英文标题】：Jquery Datatable search box align left

【发布时间】：2015-01-28 03:19:26

【问题描述】：

我正在使用主干和 jQuery 数据表。默认情况下，数据表的搜索框位于右侧 - 我想把它对齐到左边。以下是我的代码：

onDomRefresh: function()
   $(this.el).find('table').dataTable( "dom": '<"top"i>rt<"bottom"flp><"clear">',"bLengthChange": false );

但它不起作用。

【参考方案1】：

你可以使用类似的东西

jQuery(document).ready(function($) 
    $(tableSelector).DataTable(
        "dom": '<"pull-left"f><"pull-right"l>tip'
    );
);

与

.pull-leftfloat:left!important;
.pull-rightfloat:right!important;

结果是这样的：（请注意，屏幕截图上使用了 Twitter Bootsrap，用于额外的表格样式）

有关 DataTables DOM 操作的更多信息，请参阅here。

【参考方案2】：

看起来这对于 sDom 操作是不可能的，但您可以在 jquery.DataTables.css 中调整 .dataTables_filter 的 css 规则，或者最好在自定义 css 文件中覆盖此规则：

#table_div_id.dataTables_filter 
  float: right;
  text-align: right;

table_div_id是用于初始化的容器div的id：$('#table_div_id').dataTable()

【讨论】：

此解决方案如何将搜索框左对齐？

【参考方案3】：

$(document).ready(function () 

    $('#TableId').DataTable( "dom": '<"pull-left"f><"pull-right"l>tip' );        
);