[JS] [JQuery] 讓HTML 網頁 Table 表格能依據 Header 欄位自動排序

筆記一下。因應客戶需求實作測試了3種作法:

1.使用 kryogenix sorttable

   快速好用。如果Table 裡有 Checkbox 欄位，可能會導致無法Work；若需要對Checkbox 作排序，則須自行加入JavaScript 程式。

Steps:
      1. Download the Javascript library    
      2. Include the Javascript library, by putting a link to it in the HEAD of your page, like so:
          <script src="sorttable.js"></script>
      3. Mark your table as a sortable one by giving it a class of "sortable":
          <table class="sortable">

http://www.kryogenix.org/code/browser/sorttable/

2. 使用JQuery query.dataTables.js

    實作 Demo 沒問題，但套用在客戶需求，Table 有 Checkbox, 似乎會導致其他 Header 欄位的排序不正確。(應該是個案吧，因無時間再研究，暫時無解。)

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
    <script type="text/javascript" src="https://datatables.net/beta/1.7/media/js/jquery.dataTables.js"></script>

<script>
/* Create an array with the values of all the input boxes in a column */
$.fn.dataTableExt.afnSortData['dom-text'] = function  ( oSettings, iColumn )
{
 var aData = [];
 $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
  aData.push( this.value );
 } );
 return aData;
}
/* Create an array with the values of all the select options in a column */
$.fn.dataTableExt.afnSortData['dom-select'] = function  ( oSettings, iColumn )
{
 var aData = [];
 $( 'td:eq('+iColumn+') select', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
  aData.push( $(this).val() );
 } );
 return aData;
}
/* Create an array with the values of all the checkboxes in a column */
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn )
{
 var aData = [];
 $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
  aData.push( this.checked==true ? "1" : "0" );
 } );
 return aData;
}
/* Initialise the table with the required column sorting data types */
$(document).ready(function() {
 $('#example').dataTable( {
  "aoColumns": [
   null,
   null,
   { "sSortDataType": "dom-text" },
   { "sSortDataType": "dom-text", "sType": "numeric" },
   { "sSortDataType": "dom-select" },
   { "sSortDataType": "dom-checkbox" }
  ]
 } );
} );
</script>
https://datatables.net/beta/1.7/examples/plug-ins/dom_sort.html

3. 使用JQuery Tablesorter Plugin

    http://tablesorter.com/docs/

    因預期 Checkbox 也可做排序，最後採用第三種方式。

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.5/js/jquery.tablesorter.min.js"></script>

<script>
    // add parser through the tablesorter addParser method
    $.tablesorter.addParser({
        id: 'checkbox',
        is: function (s) {
            return false;
        },
        format: function (s, table, cell, cellIndex) {
            var $c = $(cell);
            // return 1 for true, 2 for false, so true sorts before false
            if (!$c.hasClass('updateCheckbox')) {
                $c
                .addClass('updateCheckbox')
                .bind('change', function () {
                    $(table).trigger('updateCell', [cell]);
                });
            }
            return ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
        },
        type: 'numeric'
    });
    $(function () {
        $("table").tablesorter({
            widgets: ['zebra'],
            headers: {
                0: { sorter: ‘checkbox' } ,
                2: {sorter: false}
            }
        });
    });
</script>
<table class="tablesorter">
    <thead>
        <tr>
            <th></th>
            <th>AlphaNumeric</th>
            <th>Numeric</th>
            <th>Animals</th>
            <th>Sites</th>
        </tr>
    </thead>
    <tbody>
        <tr><td><input type="checkbox"></td><td>abc 123</td><td>10</td><td>Koala</td><td>http://www.google.com</td></tr>
        <tr><td><input type="checkbox"></td><td>abc 1</td><td>234</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
        <tr><td><input type="checkbox"></td><td>abc 9</td><td>10</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
        <tr><td><input type="checkbox"></td><td>zyx 24</td><td>767</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
        <tr><td><input type="checkbox"></td><td>abc 11</td><td>3</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
        <tr><td><input type="checkbox"></td><td>abc 2</td><td>56</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
        <tr><td><input type="checkbox"></td><td>abc 9</td><td>155</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
        <tr><td><input type="checkbox"></td><td>ABC 10</td><td>87</td><td>Zebra</td><td>http://www.google.com</td></tr>
        <tr><td><input type="checkbox"></td><td>zyx 1</td><td>999</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
        <tr><td><input type="checkbox"></td><td>zyx 12</td><td>0</td><td>Llama</td><td>http://www.nasa.gov/</td></tr>
    </tbody>
</table>

http://www.frontendwebhelp.com/javascript/jquery-table-sorter-example/