Problems with jPages (jQuery Plugin)

Question

I have some problems with jPages. I have a table and want to use the pagination which jPages provides. When I saw the row by row fadeTo effect from the example on the given page, I decided to have the same on my table. By doing so I faced these problems:

• When using border-collapsed, the backgroundcolor disappears for a moment and stays only directly around the content of a cell, after this the backgroundcolor appears again.

I solved this problem by using border-separate and using border-spacing 0px instead and append the row style to the cell elements instead of the row elements and by changing the rowstyles in that way that they only have borders at the top instead of top and bottom.

• This brings up my next problem: In IE9 the borders between the rows appear before the rows are faded. (Not so in Firefox) When the rows are faded every second border disappear (the top-border of rowstyle1). I solved the problem of the disappearing borders by using top and bottom borders on rowstyle2 and left rowstyle1 without a border. But the borders still appear before the content of the rows.

• The last problem: Because I don't use border-collapse: collapsed anymore I have white borders between my columns in IE7. (Not in IE8). Additionally in IE7, IE8 and Opera there is no fadeTo effect.

By using divs instead of table tags none of the problems exists! But I know that it ist semantically incorrect.

So my questions are: How to solve the last problems? And why do these problems exist by using table tags? And maybe anyone knows why my solutions work, because I can't find an explanation for what I investigated.

Here's the current code:

<script>
    $(document).ready(function() {
        $(function(){
            $("div.holder").jPages({
                containerID : "torsch",
                perPage: 40
            });
        });
    }); 
</script>

CSS:

<style>
    .rowstyle2 {    
        height:25px;
        border-left: 0px none;
        border-right:0px none;
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
        background: url("/images/test.png") repeat-x scroll 0% 0% transparent;
        vertical-align:middle;
    }

    .rowstyle1 {
        background-color:#FFFFFF;
        height:25px;
        border-top: 0px none;
        border-bottom: 0px none;
        border-left:0px none;
        border-right:0px none;  
        vertical-align:middle;
    }

    table {
        border-spacing: 0px;    
    }
</style>

HTML:

<div class="holder"></div>
<table>
    <thead>
        <th>col1</th>
        <th>col2</th>
        <th>col3</th>
    </thead>
    <tbody id="torsch">
        <tr>
            <td class="rowstyle2">1</td>
            <td class="rowstyle2">45</td>
            <td class="rowstyle2">4546</td>
        </tr>
        <tr>
            <td class="rowstyle1">1</td>
            <td class="rowstyle1">45</td>
            <td class="rowstyle1">4546</td>
        </tr>
        <tr>
            <td class="rowstyle2">1</td>
            <td class="rowstyle2">45</td>
            <td class="rowstyle2">4546</td>
        </tr>
        <tr>
            <td class="rowstyle1">1</td>
            <td class="rowstyle1">45</td>
            <td class="rowstyle1">4546</td>
        </tr>
        <tr>
            <td class="rowstyle2">1</td>
            <td class="rowstyle2">45</td>
            <td class="rowstyle2">4546</td>
        </tr>
    </tbody>
</table>

Answer 1

Check, if anyone having same problem Please change in JPage.js line 58

/* only visible items! */
// this._items = this._container.children(":visible");
this._items = this._container.children();

It worked for me.