Question

数据表自动生成以下内容＆＃34;显示20个任务中的1到10个＆＃34;以及带页码的分页块。

我想要做的就是交换它们，以便信息显示在右侧，分页显示在左侧。

我怎么能用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

查看DOM positioning

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

我在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 2

如果您无法修改插件html，请在插件初始化后尝试执行以下查询。但是如果你可以修改插件源来交换元素位置

会更好

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

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

<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>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,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>$86,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>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,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>$372,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>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
        </tbody>
    </table>

＆＃13;

jQuery交换元素

3 个答案: