CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrapsingle-page-application
Pranitha
Pranitha

Reputation: 75

Bootstrap table Export and Pagination issue

Here is a table,I am looking forward to get: plunker1:http://plnkr.co/edit/ZJ1D2Niv0IT85APdnBzk?p=preview

And this is where I have tried to implement the idea above, but Bootstrap exporting and pagination do not seem to get there.

plunker2:http://plnkr.co/edit/COd2VHFzZdcI1jjTS4od?p=preview (View Tab2, pick a date and submit for the table to generate)

The table appears with some of the Bootstrap styling. I have tried adding pagination and export options but couldn't get the result. Would be grateful if anyone can help in getting the bootstrap table with pagination and exporting options in my SPA.

Upvotes: 0

Views: 1680

Answers (2)

Pepelius
Pepelius

Reputation: 1609

I am here to provide half of an answer to your question. I could not figure out what causes the data-pagination not to work (except that in your Plunker #2 you have erased it completely from the <table>)

But few problems sorted out first:

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>

jQuery should be loaded first. And in Plunker #2 you are using a bit too old version of jQuery I would assume, for Bootstrap. If you look at the Plunker #1, you can see the jQuery is being loaded before anything else.

It also seems that the tables-submit.html which creates the table itself in Plunker #2 does not load any resources at all. I tried to copy and paste the <head> section from your index.html and I got the styles and everything to work.

I would say the problem with the pagination is that, first of all, you don't have the data-pagination="true" in your <table> properties and there might be some JavaScript conflicts caused by wrong load orders or something like that. Use your browser's inspector/console to figure out if there are any JS errors and if so, please post them here.

Upvotes: 1

trk
trk

Reputation: 2228

Please add class="table" to the table element in table-submit.html. I get the following: enter image description here

This could be what you are looking for ?

Upvotes: 0

Related Questions