Reputation: 958
I'm creating a jquery plugin for sorting and pagination a table (I know that there are loads of them and I tried a lot om them, but none so far fits my needs.)
Anyway, I have a lot of tables on my page and call my plugin with:
$('.data-table').tableSorterTwo();
Here is the plugin code:
(function($)
{
$.fn.tableSorterTwo = function()
{
return this.each(function()
{
countRows($(this));
hideRows($(this));
});
};
function countRows(element)
{
console.log($(element).find('tbody tr').size());
}
function hideRows(element)
{
$(element).find('tbody tr').hide().slice(0, 5).show();
}
})(jQuery);
The weird thing is that size and slice are working unexpected and I can't pin down way.
I have this table with 6 rows; countRows
returns 18. This happens for all tables. The result is the amount of rows multiplied by 3. Why is that?
Als the result of hideRows
is unexpected. I want to show the first 5 rows of the table; but now (for every table) only the first 2 rows are displayed. Changing 5 to 10 results in 4 rows being shown.
Were are my errors? Messing with this for some time now, but I'm completely lost at the moment and every help/hint/suggestion is very welcome!
Upvotes: 0
Views: 200
Reputation: 136154
As per my comment, I believe that Stack Overflow has been your teddy bear and the mere act of asking this question has lead you to fix it.
I can demonstrate that your code behaves as expected using the selector tbody tr
, however the slight mistake of changing the selector to tbody td
exhibits the behaviour you describe in the question for a table of 6 rows and 3 cells per row.
Upvotes: 1