Checkbox with paging #204
Comments
|
I'd love to help, but I'd need to see some code. In the mean time try using the jQuery $('.toggleAll').click(function(){
var isChecked = $(this).prop('checked');
// make sure we only target visible rows; but not in nested tables
$('table').children('tbody').children('tr:visible').prop('checked', isChecked);
});This assumes that the checkbox in the header has a class name of |
|
I really appreciated your help and reply . I am glad you give me a solution. I think, i did not explaining my problem clearly. The problem is, I have 500 total records in my database & i have set paging 50 records per page. i want, if i click header checkbox it should only select 50 records means it should select only display rows according to the paging. Currently i am using below code in my application and it selects all 500 records. I want to select only paging display records. Kindly help me for resolve this issue. I will be very thankful for your support. Your earlier reply will highly be appreciated. $(document).ready(function(){
$.tablesorter.addParser({
id: 'checkbox',
is: function(s) {
return false;
},
format: function(s, table, cell, cellIndex) {
var $t = $(table), $c = $(cell), c,
// column containing all of the checkboxes (zero-based index)
columnWithCheckboxes = 0,
// resort the table after the checkbox status has changed
resort = false;
if (!$t.hasClass('hasCheckbox')) {
$t
.addClass('hasCheckbox')
// make checkbox in header set all others
.find('thead th:eq(' + columnWithCheckboxes + ') input[type=checkbox]')
.bind('change', function(){
c = this.checked;
$t.find('tbody tr td:nth-child(' + (columnWithCheckboxes + 1) + ') input').each(function(){
this.checked = c;
$(this).trigger('change');
});
})
.bind('mouseup', function(){
return false;
});
$t.find('tbody tr').each(function(){
$(this).find('td:eq(' + columnWithCheckboxes + ')').find('input[type=checkbox]').bind('change', function(){
$t.trigger('updateCell', [$(this).closest('td')[0], resort]);
});
});
}
// return 1 for true, 2 for false, so true sorts before false
c = ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
$c.closest('tr')[ c === 1 ? 'addClass' : 'removeClass' ]('checked');
return c;
},
type: 'numeric'
});
// Initialize tablesorter
// ***********************
$("#myTable")
.tablesorter({
theme: 'blue',
widthFixed: false,
widgets: ['zebra', 'resizable'],
//widgets: ['zebra', 'filter','resizable']
headers: {
0: {
sorter: 'checkbox'
}
}
})
}); |
|
Happy Holidays! I ended up updating this demo. The only change I made to it, not the code above, was to add the $t.find('tbody tr:visible td:nth-child(' + (cellIndex + 1) + ') input').each(function(){here is the full code: $(function(){
// add parser through the tablesorter addParser method
$.tablesorter.addParser({
id: 'checkbox',
is: function() {
return false;
},
format: function(s, table, cell, cellIndex) {
var $t = $(table), $c = $(cell), c,
// resort the table after the checkbox status has changed
resort = false;
if (!$t.hasClass('hasCheckbox')) {
$t
.addClass('hasCheckbox')
// make checkbox in header set all others
.find('thead th:eq(' + cellIndex + ') input[type=checkbox]')
.bind('change', function(){
c = this.checked;
$t.find('tbody tr:visible td:nth-child(' + (cellIndex + 1) + ') input').each(function(){
this.checked = c;
$(this).trigger('change');
});
})
.bind('mouseup', function(){
return false;
});
$t.find('tbody tr').each(function(){
$(this).find('td:eq(' + cellIndex + ')').find('input[type=checkbox]').bind('change', function(){
$t.trigger('updateCell', [$(this).closest('td')[0], resort]);
});
});
}
// return 1 for true, 2 for false, so true sorts before false
c = ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
$c.closest('tr')[ c === 1 ? 'addClass' : 'removeClass' ]('checked');
return c;
},
type: 'numeric'
});
// Initialize tablesorter
// ***********************
$("#myTable")
.tablesorter({
theme: 'blue',
widthFixed: false,
widgets: ['zebra', 'resizable'],
//widgets: ['zebra', 'filter','resizable']
headers: {
0: {
sorter: 'checkbox'
}
}
});
}); |
|
Hi, Thanks |
|
Hmm, I made this demo which includes the pager plugin and it doesn't redirect back to the first page. I also updated the widget again to update the header checkbox to reflect what it finds in the current page. It will automatically check itself if all visible rows are checked, and uncheck itself otherwise. $.tablesorter.addParser({
id: 'checkbox',
is: function(s) {
return false;
},
format: function(s, table, cell, cellIndex) {
var $t = $(table),
$tb = $t.children('tbody'),
$c = $(cell),
c, check,
// resort the table after the checkbox status has changed
resort = false;
if (!$t.hasClass('hasCheckbox')) {
// update the select all visible checkbox in the header
check = function($t) {
var $v = $tb.children('tr:visible'),
$c = $v.filter('.checked');
$t.find('.selectVisible').prop('checked', $v.length === $c.length);
};
$t
.addClass('hasCheckbox')
// update select all checkbox in header
.bind('pageMoved', function() {
check($t);
})
// make checkbox in header set all others
.find('thead th:eq(' + cellIndex + ') input[type=checkbox]')
.addClass('selectVisible')
.bind('change', function() {
c = this.checked;
$tb.find('> tr:visible td:nth-child(' + (cellIndex + 1) + ') input')
.each(function() {
this.checked = c;
$(this).trigger('change');
});
}).bind('mouseup', function() {
return false;
});
$tb.children('tr').each(function() {
$(this).find('td:eq(' + cellIndex + ')').find('input[type=checkbox]')
.bind('change', function() {
$t.trigger('updateCell', [$(this).closest('td')[0], resort]);
check($t);
});
});
}
// return 1 for true, 2 for false, so true sorts before false
c = ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
$c.closest('tr')[c === 1 ? 'addClass' : 'removeClass']('checked');
return c;
},
type: 'numeric'
});
$(function() {
$('table').tablesorter({
theme: 'blackice',
widgets: ['zebra', 'stickyHeaders'],
headers: {
0: {
sorter: 'checkbox'
}
}
}).tablesorterPager({
container: $(".pager"),
size: 5
});
}); |
|
Thanks for give me the fantastic solution & its working fine. Can you help me one more issue in table sort. I want to add inline editing in tablesort table through ajax+php the database is mysql how can this possible. I will be very thankful for this help also. Take care |
|
I am waiting for your reply. Please help me this issue also. |
|
Sorry I'm out of town at the moment. I'll be back next year (later this
|
|
Sorry for disturbed you. Okay I am waiting your positive response. |
|
Do you mean inline-editing like using HTML5 contenteditable? I think it'll require something similar to the parser from this demo which also uses the "updateCell" method. All you would need to include in that parser is a method to update your database. |
|
Thanks for giving that demo. can you tell me how can i edit the sortertable on click each cell or i want to make sortertable like this. http://comp345.awardspace.com/sorter/sorter.php# Your help needed, i request you please give me tablesorter demo which update database also on edit each cell. I really appreciated your help & reply |
|
Well, I can't really make you a demo which updates your database because there is no indication of how your database is setup. But, I can suggest a few things:
This demo is what I ended up with... You'll need to edit the HTML (basic table) <table id='mySortable' class='tablesorter'>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr id="addrow" style="display:none;"> <!-- Our add new row -->
<td><input type="text" name="addname" value="" /></td>
<td><input type="text" name="addage" value="" /></td>
<td><input type="text" name="addlocation" value="" /></td>
<td>
<a href="#" id="saveadd">Save</a> | <a href="#" id="canceladd">Cancel</a>
</td>
</tr>
</thead>
<tbody>
<tr class="dataline" data-recordId="001">
<td class='name'>Cow</td>
<td class='age'>4</td>
<td class='location'>Barnyard</td>
<td><a href="#" class="editlink"><img alt="Edit" style="border: 0px none; margin-left: 5px;" src="images/icons/page_edit.gif"/></a></td>
<td><a href="#" class="removelink"><img alt="Remove" style="border: 0px none; margin-left: 5px;" src="images/icons/bin.gif"/></a></td>
</tr>
<!-- other rows here -->
</tbody>
</table>Javascript $(document).ready(function () {
$("#mySortable").tablesorter({
widgets: ['zebra'],
headers: {
3: { sorter: false },
4: { sorter: false }
}
});
var $editRow = $('<tr class="editline"><td><input type="text" name="editname" /></td><td><input type="text" name="editage" /></td><td><input type="text" name="editlocation" /></td><td colspan="2"><a href="#" class="savelink">Save</a> | <a href="#" class="cancellink">Cancel</a></td></tr>'),
getRowData = function($row){
// return an array of values [ 'name', 'age', 'location' ];
return $row.find('.name, .age, .location').map(function(){
return $(this).text();
}).get(); // make it an array
},
saveRowData = function($row, data){
// update row data
$row.find('.name, .age, .location').each(function(i){
$(this).text(data[i]);
});
// update the to database
var recordId = $row.attr('data-record'); // get a record id
// url to post data & set up the data to post
$.post("update.php", { id: recordId, name: data[0], age: data[1], location: data[2] }, function(){
// alert('success!');
});
};
$(".editlink").click(function() {
var $row = $(this).closest('tr'),
data = getRowData($row);
$row
.hide() // hide original row
.after($editRow)
// save current row text into the inputs
.next().find('input').each(function(i){
$(this).val( data[i] );
}).end()
// set up the save and cancel links
.find('a').click(function(){
if ($(this).hasClass('savelink')) {
// make an array of editor input values
data = $(this).closest('tr').find('input').map(function(){
return $(this).val();
}).get(); // make it an array
saveRowData($row, data);
}
// remove the edit row
$('.editline').remove();
$row.show();
});
});
$(".removelink").click(function () {
// remove row
$(this).closest('tr').remove();
// update table
$("#mySortable").trigger("update");
// show message
$("#updatemessage").text("Row remove success").fadeOut(4000, function () {
$(this).css('display', 'block').text("");
});
});
$("#addrowbutton").click(function () {
$("#addrow").show();
});
$("#canceladd").click(function () {
$("#addrow").hide();
});
$("#saveadd").click(function () {
var $newRow = $("#mySortable tbody tr:last").clone(),
newData = $('#addrow input').map(function(){
return $(this).val();
}).get();
$("#mySortable tbody").append($newRow);
saveRowData($newRow, newData);
$("#addrow input").val("");
$("#addrow").hide();
$("#updatemessage").text("Row added success").fadeOut(4000, function () {
$(this).css('display', 'block').text("");
});
// sort on the first column
$("#mySortable")
.trigger("update")
.trigger("applyWidgets", "zebra");
});
}); |
|
Thanks for giving me the above help. i have one more issue in tablesorter. if i have more than 1000 rows table sorter load slow & filter is also working slow even i enter keyword its going to hanging position 2 to 3 sec. why this happen can you please help me how can i fast load tablesorter & filter works without hanging. Waiting for your positive reply. |
|
Please help me i am stuck. i also used another jquery search table script but it still take time like filter both are going to hanging 4 to 5 sec if i have more than 1000 rows. please help me below is the script. $(document).ready(function()
{
$('#search').keyup(function()
{
searchTable($(this).val());
});
});
function searchTable(inputVal)
{
var table = $('#myTable');
table.find('tr').each(function(index, row)
{
var allCells = $(row).find('td');
if(allCells.length > 0)
{
var found = false;
allCells.each(function(index, td)
{
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(td).text()))
{
found = true;
return false;
}
});
if(found == true)$(row).show();else $(row).hide();
}
});
} |
|
@behindmyface It's slow because the code you shared is doing a lot of DOM manipulation. Maybe you could try the quicksearch plugin discussed here. |
|
Darn my OCD... I modified your code above to be more efficient, and use a tablesorter function to detach the tbody from the dom; so it should be faster. Here's a demo; try it with the 1000+ rows and see if it works better for you. var timer;
$('#search').keyup(function () {
var search = $(this).val();
// delay search while the user types
clearTimeout(timer);
timer = setTimeout(function () {
searchTable(search);
}, 500);
});
function searchTable(inputVal) {
var $table = $('#myTable'),
$tbody = $.tablesorter.processTbody($table[0], $table.find('tbody:first'), true), // remove tbody
regex = new RegExp(inputVal, 'i'),
allCells, found;
$tbody.find('tr').each(function (index, row) {
allCells = $(row).find('td');
if (allCells.length > 0) {
found = false;
allCells.each(function (index, td) {
if (regex.test($(td).text())) {
found = true;
return false;
}
});
$(row).toggle(found);
}
});
$.tablesorter.processTbody($table[0], $tbody, false); // restore tbody
$table.trigger('applyWidgets'); // update the widgets
} |
|
First i am very thankful for always you help me. You are champ. The search issue has resolved. it working fine. I am facing same issue in checkbox checked when i click on check box checked its taking 5 sec to 10 sec time to show all records checked. even i have added the settime timeout function also below is the code. The one more issue, i have more than 1000 records & when i open my page table sorter take time to load basically first it show html table then it load table sorter theme. i Google it but i didn't find how can i fast tablesorter load. The checkbox code which you gave me help me, i have added set timeout function but not working. $(document).ready(function(){
$.tablesorter.addParser({
id: 'checkbox',
is: function(s) {
return false;
},
format: function(s, table, cell, cellIndex) {
var $t = $(table),
$tb = $t.children('tbody'),
$c = $(cell),
c, check,
// resort the table after the checkbox status has changed
resort = false;
if (!$t.hasClass('hasCheckbox')) {
// update the select all visible checkbox in the header
check = function($t) {
var $v = $tb.children('tr:visible'),
$c = $v.filter('.checked');
$t.find('.selectVisible').prop('checked', $v.length === $c.length);
};
$t
.addClass('hasCheckbox')
// update select all checkbox in header
.bind('pageMoved', function() {
check($t);
})
// make checkbox in header set all others
.find('thead th:eq(' + cellIndex + ') input[type=checkbox]')
.addClass('selectVisible')
.bind('change', function() {
c = this.checked;
$tb.find('> tr:visible td:nth-child(' + (cellIndex + 1) + ') input')
.each(function() {
this.checked = c;
$(this).trigger('change');
});
}).bind('mouseup', function() {
return false;
});
$tb.children('tr').each(function() {
$(this).find('td:eq(' + cellIndex + ')').find('input[type=checkbox]')
.bind('change', function() {
$t.trigger('updateCell', [$(this).closest('td')[0], resort]);
check($t);
});
});
}
// return 1 for true, 2 for false, so true sorts before false
c = ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
$c.closest('tr')[c === 1 ? 'addClass' : 'removeClass']('checked');
return c;
},
type: 'numeric'
});
var timer;
$('.toggleAll').click(function(){
clearTimeout(timer);
timer = setTimeout(function () {
var isChecked = $(this).prop('checked');
// make sure we only target visible rows; but not in nested tables
$('table').children('tbody').children('tr:visible').prop('checked', isChecked);
}, 5000);
});
// Initialize tablesorter
// ***********************
$("#myTable")
.tablesorter({
theme: 'blue',
widthFixed: false,
widgets: ['zebra', 'resizable','filter'],
//widgets: ['zebra', 'filter','resizable']
headers: {
0: {
sorter: 'checkbox'
}
}
})
// initialize the pager plugin
// ****************************
.tablesorterPager({
// target the pager markup - see the HTML block below
//container: $(".pager"),
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
//output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
//fixedHeight: true,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
//removeRows: false,
// go to page selector - select dropdown that sets the current page
//cssGoto: '.gotoPage'
container: $(".pager"),
size: 5
});
// **************
$('button:contains(Destroy)').click(function(){
// Exterminate, annhilate, destroy! http://www.youtube.com/watch?v=LOqn8FxuyFs
var $t = $(this);
if (/Destroy/.test( $t.text() )){
$('table').trigger('destroy.pager');
$t.text('Restore Pager');
} else {
$('table').tablesorterPager(pagerOptions);
$t.text('Destroy Pager');
}
});
// Disable / Enable
// **************
$('button:contains(Disable)').click(function(){
var mode = /Disable/.test( $(this).text() );
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
$(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
});
});Again Again Thanks for your support. |
|
I am waiting for your reply, please help me for resolving the speed issue. Thanks |
|
Hi @behindmyface! Sorry, I have to run right now, but I will try to answer you today. |
|
Ok, so I'm confused.
|
|
Sorry for inconvenience. basically i have 1000+ rows, the issue is if i click in header for sorting it takes time or hanging position for 2 to 4 sec, same issue in checkbox also. if i checked on header checkbox for selecting all visible records it takes times also. can you help me for resolving this issue. one thing i inform you if i have less than 50 records it works fast. Thanks for your support & help. waiting for your reply |
|
So then you're not using the pager plugin. You know looking at the code again, this code is only checking the // BAD CODE
$('table').children('tbody').children('tr:visible').prop('checked', isChecked);Once again, if you hide the tbody (or table), manipulate the dom, then restore the tbody (or table), it should speed up the processing of large tables. IT WILL STILL BE SLOW, but not as slow. Try this: $('.toggleAll').click(function(){
var isChecked = $(this).prop('checked'),
$table = $('table'),
// make sure we only target visible rows; but not in nested tables
$rows = $table.children('tbody').children('tr:visible');
$table.hide();
$rows.find('td:nth-child(' + (cellIndex + 1) + ') input').prop('checked', isChecked);
$table.show();
});or if you are using the widget, try this update: // add parser through the tablesorter addParser method
$.tablesorter.addParser({
id: 'checkbox',
is: function (s) {
return false;
},
format: function (s, table, cell, cellIndex) {
var $t = $(table),
$c = $(cell),
c,
// resort the table after the checkbox status has changed
resort = false;
if (!$t.hasClass('hasCheckbox')) {
$t.addClass('hasCheckbox')
// make checkbox in header set all others
.find('thead th:eq(' + cellIndex + ') input[type=checkbox]')
.bind('change', function () {
var isChecked = $(this).prop('checked'),
// make sure we only target visible rows; but not in nested tables
$rows = $t.children('tbody').children('tr:visible');
$t.hide();
$rows.find('td:nth-child(' + (cellIndex + 1) + ') input').prop('checked', isChecked);
$t.trigger('update').show();
})
.bind('mouseup', function () {
return false;
});
$t.find('tbody tr').each(function () {
$(this).find('td:eq(' + cellIndex + ')').find('input[type=checkbox]').bind('change', function () {
$t.trigger('updateCell', [$(this).closest('td')[0], resort]);
});
});
}
// return 1 for true, 2 for false, so true sorts before false
c = ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
$c.closest('tr')[c === 1 ? 'addClass' : 'removeClass']('checked');
return c;
},
type: 'numeric'
});
$(function () {
$('table').tablesorter({
theme: 'blackice',
widgets: ['zebra', 'stickyHeaders'],
headers: {
0: {
sorter: 'checkbox'
}
}
});
}); |
|
Thanks for your reply & help me but i am still facing issues after the add your code. You can view link on this http://sundaybazaar.com.pk/tablesorter/mysearch_new.php The first issue is if i checked checkbox it takes still time and same in sort column still take time to sort column. The second issue if i resize any column other standing column resize automatically, if i set or resize any column i need to set other column also, can we make it like excel column if i resize any column other column width will not change. it simply move with same width like felxigrid has this feature. The third issue is you see table sorter first time loading take times currently i have more than 800 records & it takes time what about if i have more than 5000 records. is this possible to paging connect with mysql or data fetch with my sql through ajax, i see your ajax pagination but i was not clearly understand and also you share me DataTables infinite scrolling on your previous msg, can you help me how can i use datatable scrolling technique in tablesorter. I hope you help me on my all above issues, i have done all work in tablesorter & i dont want to use any other grid like felxigrid, phpgrid etc i need your help. waiting for your positive reply.... Thanks again for your help |
|
Honestly, I think you'd be better off sorting, searching and processing that table of data server-side. Then allow your users to search for the data they want. The HTML page itself is 1.5 Mb in size. No mobile user will want to use your page. |
|
Thanks for your reply you suggest me, should i use server side sorting & paging instead of tablesorter. is there any way to speedup the tablesorter |
|
Since you already have 800+ rows and are suggesting increasing it to 5000... I'd say this would only slow down the page even more. I bet it would make your site unusable in IE. You can use the tablesorter pager But other than that, I'd say don't show 1000+ rows, even with DataTables. |
|
loading all the content then to visually hide some of it via a pager.. is not good coding. you need to only request/load what the user can see. then on next page you load that data (offset from previous). that way your data set stays the same regardless of your actual db. makes for consistent ui.. tons of books and examples out there on this |
|
Thanks for your reply, okay I am using server side paging. I need your help on other column resize issue basically, if I resize any column other standing column resize & move automatically in tablesorter, if i set or resize any column I need to set other column also in tablesorter. Can we make it like excel column? If I resize any column other column width will not change. It simply moves with same width like mootable and tablekit jquery . Its column resize is working fine, can you help me how the tablesorter resize like below. http://joomlicious.com/mootable/ I am requesting you, please resolve & help me on this otherwise my all efforts on tablesorter work will be useless. I don’t want to use any other jquery plugin. I hope you can understand. Waiting for your positive reply.. |
|
Hi Mottie, I am waiting for your reply, i have found one jquery resize example i need that type, can we use with tablesorter. Please look $("#tblResize2 th").resizable(); waiting for your reply. |
|
Waiting for your reply...... |
|
See issue #215 for resizable widget updates. |
HI,
First i am thankful to you for giving us the fantastic tablesorter. I have one issue with check box selection with paging. Basically i am using export feature. if user click header "all checkbox" only selected page rows should checked only but currently when i click on header checkbox it checked all rows. I would like to request you please help me how can i check only standing page rows instead of all rows selection. I hope you help me.
The text was updated successfully, but these errors were encountered: