tablesorter plugin, i am not able to make it work

Question

i am new to coding and i dnt know my issue might be simple, but i have started to learn coding recently.

for my simple application i want to sort table and have a search box for it.

i have tried downloading latest jquery.tablesorter.js, widgets-filter.js. and tried to sort a basic table. but i am not able to make it work. i was not able to find any sample download files properly so that i would try to understand it. where in most of the plugin which i have seen would have a demo folder which can be downloaded which has basic demo of the plugin.

for my application i need to sort the table based on two columns at the page load and post loading i must be able to search using a search box. as demo provided here https://mottie.github.io/tablesorter/docs/example-widget-filter-any-match.html

i have tried looking at the source code of the page and tried using the same plugins used overthere but i was not able to make it work. can someone help me to make it work and point me where i can download a demo folder or something like that so that i can understand it.

Answer 1

Here is a simplified demo using the filter widget with an external search input: https://jsbin.com/qahuba/1/edit?html,output

Basic HTML

<input type="text" data-column="all" class="search">
<table><!-- thead & tbody required --></table>

Essential Script

<script src="//code.jquery.com/jquery-git.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script>
/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {
  $('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'filter'],
    widgetOptions: {
      // jQuery selector string (or jQuery object) of external filters
      filter_external: '.search',
      // If true, a filter will be added to the top of each table column.
      filter_columnFilters: false
    }
  });
});
</script>

Note: In production, point to jQuery and the tablesorter files on your own server or from a stable CDN source (i.e. not the jquery-git.js file or files directly from github).