Question

我有一个应用程序（使用注释的Spring 4 MVC + Hibernate 4 + MySQL + Maven集成示例），使用基于注释的配置将Spring与Hibernate集成。我有这个JSP的表：

<!-- CSS -->

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto:300,700' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" />

    <!--[if lte IE 8]>
        <link rel="stylesheet" href="css/side-menu-old-ie.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="css/side-menu.css" />
    <!--<![endif]-->

<!-- Responsive -->
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
            <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css" />
    <!--<![endif]-->

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.floatThead.min.js" type="text/javascript"></script>
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>

<table id="booksTable" class="pure-table" style="position: relative;">
    <thead>
        <tr>
            <th class="col_id">
                <!-- ID -->
                ID<a href="#" class="ico_caret"><i class="fa fa-caret-down fa-lg"></i></a>
            </th>
            <th class="col_name">
                <!-- NAME -->
                Name<a href="#" class="ico_caret"><i class="fa fa-caret-down fa-lg"></i></a>
            </th>
            <th class="col_battery">
                <!-- BATTERY -->
                Battery<a href="#" class="ico_caret"><i class="fa fa-caret-down fa-lg"></i></a>
            </th>
            <th class="col_temp">
                <!-- TEMP. -->
                Temp.<a href="#" class="ico_caret"><i class="fa fa-caret-down fa-lg"></i></a>
            </th>
            <th class="col_last_event">
                <!-- LAST EVENT -->
                Last Event (GMT + 2)<a href="#" class="ico_caret"><i class="fa fa-caret-down fa-lg"></i></a>
            </th>
            <th class="col_signal">
                <!-- SIGNAL -->
                Signal<a href="#" class="ico_caret"><i class="fa fa-caret-down fa-lg"></i></a>
            </th>
            <th class="col_state">
                <!-- STATE -->
                State<a href="#" class="ico_caret"><i class="fa fa-caret-down fa-lg"></i></a>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- Data File -->
            <td class="col_id">E000</td><!-- ID -->
            <td class="col_name">TD0000 EVB</td><!-- NAME -->
            <td class="col_battery">
                <!-- BATTERY -->
                <div class="progressBar" id="max14"><div></div></div><!-- bar % (Change ID maxnumber)-->
            </td>
            <td class="col_temp">0ºC / 0ºF </td><!-- TEMP. -->
            <td class="col_last_event"><b>00/00/0000</b> 00:00:00</td><!-- LAST EVENT -->
            <td class="col_signal">00 dBm.</td><!-- SIGNAL -->
            <td class="col_state">--</td><!-- STATE -->
        </tr>

    </tbody>
</table>

我想将其转换为JQuery 仅用于对列进行排序，因此我将其添加到JSP

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

<script>
$(document).ready(function(){
    $('#booksTable').DataTable();
});
</script>

但随后又添加了show 10 entries

Showing 1 to 5 of 5 entries
Previous  Next

我失去了以前的风格

使用开发人员工具检查TH，我发现该类肯定会从

更改

<a href="#" class="ico_caret fa-rotate-180"><i class="fa fa-caret-down fa-lg"></i></a>

到

<a href="#" class="ico_caret"><i class="fa fa-caret-down fa-lg"></i></a>

但没有进行排序： - （

Answer 1

您可以通过提供初始化选项来禁用您不想要的功能。

例如：

$('#booksTable').DataTable({
   "info": false,
   "lengthChange": false,
   "paging": false,
   "searching": false
});

有关详细信息，请参阅Options。

请参阅this example以获取代码和演示。

将HTML表转换为JQuery表以进行排序

1 个答案: