Tablesorter - filter inside input fields and values
- by Zeracoke
I have a small quest to accomplish, and I reached a point when nothing works...
So the problem is. I have a paged table with a lot of input fields inside the rows with values, and I would like to search inside these values. Let me Show this, I hope that somebody will got the idea what I should do...
<script type="text/javascript">
// add parser through the tablesorter addParser method
$.tablesorter.addParser({
id: 'inputs',
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('updateInput')) {
$c
.addClass('updateInput')
.bind('keyup', function() {
$(table).trigger('updateCell', [cell, false]); // false to prevent resort
});
}
return $c.find('input').val();
},
type: 'text'
});
$(function() {
$('table').tablesorter({
widgets: ['zebra', 'stickyHeaders', 'resizable', 'filter'],
widgetOptions: {
stickyHeaders : '',
// number or jquery selector targeting the position:fixed element
stickyHeaders_offset : 110,
// added to table ID, if it exists
stickyHeaders_cloneId : '-sticky',
// trigger "resize" event on headers
stickyHeaders_addResizeEvent : true,
// if false and a caption exist, it won't be included in the sticky header
stickyHeaders_includeCaption : true,
// The zIndex of the stickyHeaders, allows the user to adjust this to their needs
stickyHeaders_zIndex : 2,
// jQuery selector or object to attach sticky header to
stickyHeaders_attachTo : null,
// scroll table top into view after filtering
stickyHeaders_filteredToTop: true,
resizable: true,
filter_onlyAvail : 'filter-onlyAvail',
filter_childRows : true,
filter_startsWith : true,
filter_useParsedData : true,
filter_defaultAttrib : 'data-value'
},
headers: {
1: {sorter: 'inputs', width: '50px'},
2: {sorter: 'inputs'},
3: {sorter: 'inputs'},
4: {sorter: 'inputs'},
5: {sorter: 'inputs'},
6: {sorter: 'inputs'},
7: {sorter: 'inputs', width: '100px'},
8: {sorter: 'inputs', width: '140px'},
9: {sorter: 'inputs'},
10: {sorter: 'inputs'},
11: {sorter: 'inputs'},
}
}); $('table').tablesorterPager({container: $(".pager"),
positionFixed: false,
size: 50,
pageDisplay : $(".pagedisplay"),
pageSize : $(".pagesize"),
});
$("#table1").tablesorter(options);
/* make second table scroll within its wrapper */
options.widgetOptions.stickyHeaders_attachTo = '.wrapper'; // or $('.wrapper')
$("#table2").tablesorter(options);
});
</script>
The structure of the tables:
<tr class="odd" style="display: table-row;">
<form action="/self.php" method="POST">
</form><input type="hidden" name="f" value="data">
<td><input type="hidden" name="mod_id" value="741">741</td>
<td class="updateInput"><input type="text" name="name" value="Test User Name"></td>
<td class="updateInput"><input type="text" name="address" value="2548451 Random address"></td>
<td class="updateInput"><input type="email" name="email" value=""></td>
<td class="updateInput"><input type="text" name="entitlement" value="none"></td>
<td class="updateInput"><input type="text" name="card_number" value="6846416548644352"></td>
<td class="updateInput"><input type="checkbox" name="verify" value="1" checked=""></td>
<td class="updateInput"><input type="checkbox" name="card_sended" value="1" checked=""></td>
<td class="updateInput"><input type="text" name="create_date" value="2014-02-12 21:09:16"></td>
<td class="updateInput"><a href="self.php?f=data&del=741">X</a></td>
<td class="updateInput"><input type="submit" value="SAVE"></td><td class="updateInput"></td></tr>
So the thing is I don't know how to configure the filter to search these values... I already added some options, but none of them are working... Any help would be great!
