Bootstrap DataTables - 配置顶部搜索和底部分页器答案

【问题标题】：Bootstrap DataTables - Configure Top Search and Bottom PagerBootstrap DataTables - 配置顶部搜索和底部分页器
【发布时间】：2016-03-10 16:25:42
【问题描述】：

更新：我犯了一个错误 - text-right 应该在标签上。

我正在尝试做两件事：

将顶部搜索框向右滑动（只需将类添加到“text-right”的 6 列右侧 div 中）
向包含寻呼机文本以及寻呼机本身的行中的单元格添加一个类（左侧看起来像 col-sm-5，右侧看起来像 col-sm-7），以便我可以更好地控制边距从我当前的样式表在移动设备上。

棘手的部分是现在没有 ID 或类可供我在 DOM 中找到这些位置。 这是似乎由数据表生成的代码：

<div class="row">
    <div class="col-sm-6">
        <div id="ReportTable_length" class="dataTables_length">
            <label">Show <select class="form-control input-sm" aria-controls="ReportTable" name="ReportTable_length"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option><option value="-1">All</option></select> entries</label>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="dataTables_filter" id="ReportTable_filter">
            <label **(ADD class="text-right" HERE)**>Search:<input aria-controls="ReportTable" placeholder="" class="form-control input-sm" type="search"></label>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-5 **NEED-CLASS-HERE**">
      <div aria-live="polite" role="status" id="ReportTable_info" class="dataTables_info">Showing 1 to 6 of 6 entries</div>
   </div>
   <div class="col-sm-7 **NEED-CLASS-HERE**">
      <div id="ReportTable_paginate" class="dataTables_paginate paging_simple_numbers"><ul class="pagination"><li id="ReportTable_previous" class="paginate_button previous disabled"><a tabindex="0" data-dt-idx="0" aria-controls="ReportTable" href="#">Previous</a></li><li class="paginate_button active"><a tabindex="0" data-dt-idx="1" aria-controls="ReportTable" href="#">1</a></li><li id="ReportTable_next" class="paginate_button next disabled"><a tabindex="0" data-dt-idx="2" aria-controls="ReportTable" href="#">Next</a></li></ul></div>
   </div>
</div>

感谢您的帮助！

丹尼斯

【问题讨论】：

标签： twitter-bootstrap datatables

【解决方案1】：

如果你有Id，你可以获取父级和addClass或修改...例如：

$("#ReportTable_filter").find('label').css("text-align","right");// for example

$("#ReportTable_info").parent().addClass('MyClass');//Change by your class
$("#ReportTable_paginate").parent().addClass('MyClass');//Change by your Class

示例：https://jsfiddle.net/cmedina/7kfmyw6x/14/

【讨论】：

这是个好主意。实际上，我在原始帖子上打错了字 - 我更新了文本右侧应该在的位置（在标签上）。但这不起作用： $("#ReportTable_filter").children().css("text-align","right");
@Dennis 更新，使用$("#ReportTable_filter").find('label').css("text-align","right")
啊，开枪。我必须确保这些调用是在数据表调用之后进行的。一切就绪-感谢您的帮助！上面发布的答案。

【解决方案2】：

这就是解决方案。确保在数据表声明之后调用这些！哈哈。

$("#ReportTable_filter").find('label').css("text-align", "right");
$("#ReportTable_info").parent().addClass('MyClass');
$("#ReportTable_paginate").parent().addClass('MyClass')

【讨论】：