[JQuery]簡單的table 排序功能

需求:

使用頁面資料內容，點擊<th>時會遞增，遞減排序所屬<td>內容。

實作:

引用:

<!--引用dataTables css-->

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<!--引用jQuery-->

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!--引用dataTables-->

<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js">

html:

table class給JQ_DataTable,不想排序的欄位，class給no-sort。

<table class="JQ_DataTable">
    <thead>
        <tr>
            <th class="no-sort">項次</th>
            <th>內容</th>
        </tr>
    </thead>
    <tbody>
        @for (var i = 1; i <= 10; i++)
        {
            <tr>
                <td>@i</td>
                <td>@i</td>
            </tr>
        }
    </tbody>
</table>

javascript:

@section scripts{
  
    <!--引用dataTables.js-->
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script>
        var table = $('.JQ_DataTable').DataTable({
            "bPaginate": false,
            "searching": false,
            "lengthChange": false,
            "bInfo": false,
            "order": [],
            "columnDefs": [{
                "targets": 'no-sort',
                "orderable": false,
            }],
            "dom": '<""t>p'
        });
    </script>
}

結果:

Git支援:

https://github.com/scottHsuHGIGA/JQueryTableSort