So I have a basic app that uses tablesorter which includes table search and up and down sorting functionality on the table info.
The first page of the app all works fine for tabelsorter. But if i navigate to another page only the up and down functionality works. The search doesn't work working even if its the same coding on each page.
Originally i was told to put the JS coding at the bottom of the page so the DOM loads first but that only fixed the up and down functionality on the table (wasn't working either).
How can i get the Search to work like it does on the first page?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Anime Filler</title>
<link rel="stylesheet" href="css/jquery.mobile.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script src="js/app.js"></script>
<script src="phonegap.js"></script>
<script src="js/jquery.tablesorter.js"></script>
<script src="js/widgets/widget-storage.js"></script>
<script src="js/widgets/widget-filter.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-id="my-header" data-position="fixed">
<div id="head">
<center><a href="#" onclick='openURL("http://animefiller.com/")'><img id="headimg" src="logo.png" alt="" width="35" height="35" /></a></center>
</div>
</div>
<div id="main" data-role="main" class="ui-content">
</p>
<input class="search" type="search" data-column="0"> <br>
<table data-role="table" id="tablepress" class="tablesorter ui-responsive tablepress-id-24">
<thead>
<tr class="row-1 odd">
<th class="column-1 sorter-false"></th>
</tr>
</thead>
<tbody>
<tr class="row-2">
<td class="column-1"><div style="font-weight: bold; text-decoration: underline; font-size: large;">A</div></td>
</tr>
<tr class="row-3">
<td class="column-1"><a href="akatsuki-no-yona-yona-of-the-dawn.html">Akatsuki no Yona: Yona of the Dawn</a></td>
</tr>
<tr class="row-4">
<td class="column-1"><a href="assassination-classroom.html">Assassination Classroom</a></td>
</tr>
<tr class="row-5">
<td class="column-1"><a href="attack-on-titan-filler/">Attack on Titan</a></td>
</tr>
<tr class="row-6">
<td class="column-1"><div style="font-weight: bold; text-decoration: underline; font-size: large;">B</div></td>
</tr>
</tbody>
</table>
</div>
<div data-role="footer" data-id="my-footer" data-position="fixed">
<p style="text-align: center;"><span style="text-decoration: underline; color: #99cc00;"><a style="color: #99cc00; text-decoration: underline;" href="#" onclick='openURL("http://www.crunchyroll.com/affiliate_redirect/?widget=Tu017&affiliate=af-46138-imyw")'><strong>Watch Anime Online</strong></a></span>
</div>
</div>
<script id="js">$(function() {
var $table = $('table').tablesorter({
theme: 'blue',
widgets: ["zebra", "filter"],
widgetOptions : {
// filter_anyMatch replaced! Instead use the filter_external option
// Set to use a jQuery selector (or jQuery object) pointing to the
// external filter (column specific or any match)
filter_external : '.search',
// add a default type search to the first name column
filter_defaultFilter: { 1 : '~{query}' },
// include column filters
filter_columnFilters: false,
filter_placeholder: { search : 'Search...' },
filter_saveFilters : true,
filter_reset: '.reset'
}
});
// make demo search buttons work
$('button[data-column]').on('click', function(){
var $this = $(this),
totalColumns = $table[0].config.columns,
col = $this.data('column'), // zero-based index or "all"
filter = [];
// text to add to filter
filter[ col === 'all' ? totalColumns : col ] = $this.text();
$table.trigger('search', [ filter ]);
return false;
});
});
</script>
<script>
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
<script>
function openURL(urlString){
myURL = encodeURI(urlString);
window.open(myURL, '_system');
}
</script>
</body>
</html>
