Probly new issue?

[phuochtt]

Hi,
I'm using jplist to paginate pages from a doc inside a modal and encounter this issue: all the pages button are displayed 1. Here's what I did: I put static html text for the pagination control:

            <div id="pagination-container" class="fl-r"
                 data-jplist-control="pagination"
                 data-group="inv-page"
                 data-items-per-page="1"
                 data-current-page="0"
                 data-name="inv-pagination">

                <button type="button" data-type="first">«</button>
                <button type="button" data-type="prev">‹</button>

                <div class="jplist-holder" data-type="pages">
                    <button type="button" data-type="page">{pageNumber}</button>
                </div>

                <button type="button" data-type="next">›</button>
                <button type="button" data-type="last">»</button>
            </div>

In a js file, I wrote these scripts:

$('#inv-tmpl-container').html(returnData);
$("table[style*='page-break-inside: avoid']").wrap("<div data-jplist-item><div id='printView'><div class='VATTEMP'><div class='inv-page'></div></div></div></div>");
$("#pages").remove();
$("#pagination-container").before('<div id="pages" data-jplist-group="inv-page"></div>');
$("[data-jplist-item]").each(function () {
$("#pages").append($(this));
});
jplist.init();
$('#invTmplViewModal').modal('show');

(the returnData is what I got after sending an Ajax request). This only happens after I dismiss the modal, the first time I initiated the jplist, it works perfectly. Any ideas on what I can do to solve this? Thanks in advance.