سؤال

I'm trying to sort my table with table sorter and it is not working

<html>
<head>
     <link rel="stylesheet" href="blueStyle.css" type="text/css" media="print, projection, screen" />
    <script src="http://tablesorter.com/jquery-latest.js" type="text/javascript"></script> 
    <script src="http://tablesorter.com/__jquery.tablesorter.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {      
        $("#myTable").tablesorter();
    }); 
    </script>
</head>
<body>
<table id="myTable" class="tablesorter" border="0" cellpadding="0" cellspacing="1"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table>
</body> 
 </html>

The styling seem to work, but there is not sorting.

This is what the table looks like at the moment. enter image description here

هل كانت مفيدة؟

المحلول

You forgot to close a script tag </script> : 

<script src="http://tablesorter.com/__jquery.tablesorter.min.js" type="text/javascript"/>

Correct markup : 

<script src="http://tablesorter.com/__jquery.tablesorter.min.js" type="text/javascript"/></script>

I copied you code, added </script> and it works for me. Also jquery file from http://tablesorter.com/jquery-latest.js is really outdated (2008), consider using other cdn like //code.jquery.com/jquery-1.10.2.min.js or googleapis

نصائح أخرى

You need to customize with tablesorter options. Here is example http://jsfiddle.net/dhana36/BKgue/184/

$('.tablesorter').tablesorter({
    // *** Appearance ***
    // fix the column widths
    widthFixed : true,
    // include zebra and any other widgets, options:
    // 'uitheme', 'filter', 'stickyHeaders' & 'resizable'
    // the 'columns' widget will require custom css for the
    // primary, secondary and tertiary columns
    widgets    : [ 'uitheme', 'zebra' ],
    // other options: "ddmmyyyy" & "yyyymmdd"
    dateFormat : "mmddyyyy",

    // *** Functionality ***
    // starting sort direction "asc" or "desc"
    sortInitialOrder : "asc",
    // These are detected by default,
    // but you can change or disable them
    headers : {
        // set "sorter : false" (no quotes) to disable the column
        0: { sorter: "text" },
        1: { sorter: "digit" },
        2: { sorter: "text" },
        3: { sorter: "url" }
    },
    // extract text from the table - this is how is
    // it done by default
    textExtraction : {
        0: function(node) { return $(node).text(); },
        1: function(node) { return $(node).text(); }
    },
    // forces the user to have this/these column(s) sorted first
    sortForce : null,
    // initial sort order of the columns
    // [[columnIndex, sortDirection], ... ]
    sortList : [[3,0]],
    // default sort that is added to the end of the users sort
    // selection.
    sortAppend : null,
    // Use built-in javascript sort - may be faster, but does not
    // sort alphanumerically
    sortLocaleCompare : false,
    // Setting this option to true will allow you to click on the
    // table header a third time to reset the sort direction.
    sortReset: false,
    // Setting this option to true will start the sort with the
    // sortInitialOrder when clicking on a previously unsorted column.
    sortRestart: false,
    // The key used to select more than one column for multi-column
    // sorting.
    sortMultiSortKey : "shiftKey",

    // *** Customize header ***
    onRenderHeader  : function() {
        // the span wrapper is added by default
        $(this).find('span').addClass('headerSpan');
    },
    // jQuery selectors used to find the header cells.
    selectorHeaders : 'thead th',

    // *** css classes to use ***
    cssAsc        : "headerSortUp",
    cssChildRow   : "expand-child",
    cssDesc       : "headerSortDown",
    cssHeader     : "header",
    tableClass    : 'tablesorter',

    // *** widget css class settings ***
    // column classes applied, and defined in the skin
    widgetColumns : { css: ["primary", "secondary", "tertiary"] },
    // find these jQuery UI class names by hovering over the
    // Framework icons on this page:
    // http://jqueryui.com/themeroller/
    widgetUitheme : { css: [
        "ui-icon-arrowthick-2-n-s", // Unsorted icon
        "ui-icon-arrowthick-1-s",   // Sort up (down arrow)
        "ui-icon-arrowthick-1-n"    // Sort down (up arrow)
        ]
    },
    // pick rows colors to match ui theme
    widgetZebra: { css: ["ui-widget-content", "ui-state-default"] },

    // *** prevent text selection in header ***
    cancelSelection : true,

    // *** send messages to console ***
    debug : false
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top