jQuery 交换元素

Question

Datatables 自动生成了以下 "Showing 1 to 10 of 20 Tasks" 和一个带页码的分页块。

我只想交换它们，让信息出现在右边，分页出现在左边。

如何用 jQuery 做到这一点？我不能只编辑 HTML，因为 Datatable 会自动生成此代码：

<div class="col-sm-6">
    <div aria-live="polite" role="status" id="tasks-table_info" class="dataTables_info">Showing 1 to 10 of 20 tasks</div>
</div>

<div class="col-sm-6">
    <div id="tasks-table_paginate" class="dataTables_paginate paging_simple_numbers">
        <ul class="pagination">
            <li id="tasks-table_previous" tabindex="0" aria-controls="tasks-table" class="paginate_button previous disabled"><a href="#">Previous</a></li>
            <li tabindex="0" aria-controls="tasks-table" class="paginate_button active"><a href="#">1</a></li>
            <li tabindex="0" aria-controls="tasks-table" class="paginate_button "><a href="#">2</a></li>
            <li id="tasks-table_next" tabindex="0" aria-controls="tasks-table" class="paginate_button next"><a href="#">Next</a></li>
        </ul>
    </div>
</div>

欢迎任何想法，谢谢。

Answer 1

如果您无法修改插件html，请在插件初始化后尝试执行以下查询。不过如果能修改插件源码来交换元素位置就更好了

var $p = $('#tasks-table_info').parent();
$p.next().insertBefore($p)

Answer 2

看看DOM positioning

应该可以定义 table 周围所有附加信息的位置。

我在 JS 中试过 Fiddle。我需要一些额外的 CSS:

.dataTables_info {
clear: none !important;
    float:right !important;
}

.dataTables_paginate {
  float: left !important;
  text-align: justify !important;
  padding-top: 0 !important;
}

JS:

$(document).ready(function() {
  $('#example').dataTable( {
    "dom": '<"top">rt<"bottom"pi><"clear">'
  });
});

JSFiddle: Here

Answer 3

$(document).ready(function() {
  $('#historyTab').dataTable({
    "pageLength": 3,
    "dom":'<"top">t<"bottom">ip<"clear">' //https://datatables.net/examples/basic_init/dom.html
  });
});

#historyTab_paginate{float:left;}
#historyTab_info{float:right;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

 <table id="historyTab" class="tbAD table table-striped table-bordered no-footer dataTable" cellspacing="0" width="100%">
        <thead style="display:none">
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tfoot style="display:none">
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>0,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>0,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>3,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>2,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>2,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>7,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>7,900</td>
            </tr>
        </tbody>
    </table>

jQuery 交换元素

jQuery swapping elements around

jquery

datatables