Hi Kalpana,

Can you show of some code of the javascript ? How is it rendered ?

Dave

Hi,

Here is my scenario:

I have a table which loads only 5 rows for the first time and click show more will load next 5 rows.

                                <thead>
                                    <tr>
                                        <th>Year</th>
                                        <th>Col1</th>
                                        <th>Col2</th>
                                        <th>Col2</th>
                                        <th>Col3</th>

                                    </tr>
                                </thead>
                                <tbody>
                                        <tr class="table-item" style="">
                                            <td>yyyy</td>
                                            <td>val1</td>
                                            <td>val1</td>
                                            <td>val1</td>
                                            <td>1</td>
                                        </tr>
                                        <tr class="table-item" style="">
                                            <td>yyyy</td>
                                            <td>val1</td>
                                            <td>val1</td>
                                            <td>val1</td>
                                            <td>1</td>
                                        </tr>  <tr class="table-item" style="">
                                            <td>yyyy</td>
                                            <td>val1</td>
                                            <td>val1</td>
                                            <td>val1</td>
                                            <td>1</td>
                                        </tr>
                                          <tr class="table-item" style="">
                                            <td>yyyy</td>
                                            <td>val1<br/>val2</td>
                                            <td>val1<br/>val2</td>
                                            <td>val1</td>
                                            <td>1</td>
                                        </tr> <tr class="table-item" style="">
                                            <td>yyyy</td>
                                            <td>val1<br/>val2</td>
                                            <td>val1<br/>val2</td>
                                            <td>val1</td>
                                            <td>1</td>
                                        </tr>
                                        <tr class="table-item" style="display:none">
                                            <td>yyyy</td>
                                            <td>Ordinary<br>Bonus</td>
                                              <td>val1<br/>val2</td>
                                            <td>val1<br/>val2</td>
                                            <td>val1</td>
                                            <td>1</td>
                                        </tr>
                                        <tr class="table-item" style="display:none">
                                            <td>yyyy</td>
                                            <td>Ordinary<br>Bonus</td>
                                              <td>val1<br/>val2</td>
                                            <td>val1<br/>val2</td>
                                            <td>val1</td>
                                            <td>1</td>
                                        </tr> <tr class="table-item" style="display:none">
                                            <td>yyyy</td>
                                            <td>Ordinary<br>Bonus</td>
                                              <td>val1<br/>val2</td>
                                            <td>val1<br/>val2</td>
                                            <td>val1</td>
                                            <td>1</td>
                                        </tr> <tr class="table-item" style="display:none">
                                            <td>yyyy</td>
                                            <td>Ordinary<br>Bonus</td>
                                              <td>val1<br/>val2</td>
                                            <td>val1<br/>val2</td>
                                            <td>val1</td>
                                            <td>1</td>
                                        </tr> <tr class="table-item" style="display:none">
                                            <td>yyyy</td>
                                            <td>Ordinary<br>Bonus</td>
                                              <td>val1<br/>val2</td>
                                            <td>val1<br/>val2</td>
                                            <td>val1</td>
                                            <td>1</td>
                                        </tr> <tr class="table-item" style="display:none">
                                            <td>yyyy</td>
                                            <td>Ordinary<br>Bonus</td>
                                              <td>val1<br/>val2</td>
                                            <td>val1<br/>val2</td>
                                            <td>val1</td>
                                            <td>1</td>
                                        </tr> <tr class="table-item" style="display:none">
                                            <td>yyyy</td>
                                            <td>Ordinary<br>Bonus</td>
                                              <td>val1<br/>val2</td>
                                            <td>val1<br/>val2</td>
                                            <td>val1</td>
                                            <td>1</td>
                                        </tr> <tr class="table-item" style="display:none">
                                            <td>yyyy</td>
                                            <td>Ordinary<br>Bonus</td>
                                              <td>val1<br/>val2</td>
                                            <td>val1<br/>val2</td>
                                            <td>val1</td>
                                            <td>1</td>
                                        </tr>
                                </table>

After clicking show more next five (by removing display:none) are loading but not aligned properly across columns.

This table is for Desktop view- to make it responsive, cloned this table and showing that in responsive modes.

Here is the JS: // ================= GENERATE DUMMY TABLE var n = 0; var TOTALROWS = 30; for (var i = 0; i < TOTALROWS; ++i) { appendItem(); }

function appendItem() {
    var item = $(".template").clone().removeClass("template");
    item.find(".num").text(++n);
    item.addClass("table-item");
    item.hide();
    $("tbody").append(item);
}

// ================= SHOW ONLY FEW ROWS BY DEFAULT

var howMany = 5;
showDefaultRows();

function showDefaultRows() {
    var complete = 0;

    $(".table-item").each(function () {

        if (++complete > howMany) {
            return;
        }
        $(this).show();
    });
}

// ================= ON CLICK

$(".show_more").on("click", function () {

    var complete = 0;
    var showMore = 5;
    howMany += showMore;
    var rowCount = $('#dividend_table >tbody >tr').length;



    $(".table-item").each(function () {
        if (++complete > howMany) {
            return;
        }

        if(complete > rowCount-1){
            $('.show_more').addClass('completed');
        }

        $(this).fadeIn();
    });

Hope I have given useful info to understand my issue. Please let me know if you require further info.

Thank you so much.

Regards, P.Kalpana

is working on a reply...