简体   繁体   English

Bootstrap表导出和分页问题

[英]Bootstrap table Export and Pagination issue

Here is a table,I am looking forward to get: plunker1: http://plnkr.co/edit/ZJ1D2Niv0IT85APdnBzk?p=preview 这是一张桌子,我期待得到: plunker1: http : plunker1:

And this is where I have tried to implement the idea above, but Bootstrap exporting and pagination do not seem to get there. 这就是我尝试实现上述想法的地方,但是Bootstrap导出和分页似乎没有实现。

plunker2 : http://plnkr.co/edit/COd2VHFzZdcI1jjTS4od?p=preview (View Tab2, pick a date and submit for the table to generate) plunker2http : plunker2 (查看Tab2,选择一个日期并提交以供生成表格使用)

The table appears with some of the Bootstrap styling. 该表将显示一些Bootstrap样式。 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. 如果有人可以帮助获得带有分页的引导表以及在我的SPA中导出选项,将不胜感激。

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> ) 我不知道是什么原因导致data-pagination不起作用(除了在您的Plunker#2中,您已经从<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. jQuery应该首先被加载。 And in Plunker #2 you are using a bit too old version of jQuery I would assume, for Bootstrap. 在Plunker#2中,您会假设Bootstrap使用的是jQuery的版本太旧。 If you look at the Plunker #1, you can see the jQuery is being loaded before anything else. 如果您看一下Plunker#1,您会发现jQuery正在被加载。

It also seems that the tables-submit.html which creates the table itself in Plunker #2 does not load any resources at all. 似乎在Plunker#2中创建表本身的tables-submit.html根本不会加载任何资源。 I tried to copy and paste the <head> section from your index.html and I got the styles and everything to work. 我试图从您的index.html复制并粘贴<head>部分,然后我得到了样式和所有可用的东西。

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. 我会说分页的问题是,首先,您在<table>属性中没有data-pagination="true" ,并且可能由于错误的加载顺序或类似原因导致了一些JavaScript冲突。 。 Use your browser's inspector/console to figure out if there are any JS errors and if so, please post them here. 使用浏览器的检查器/控制台找出是否有JS错误 ,如果有,请在此处发布。

Please add class="table" to the table element in table-submit.html. 请将class =“ table”添加到table-submit.html中的table元素中。 I get the following: 我得到以下内容: 在此处输入图片说明

This could be what you are looking for ? 这可能是您在寻找什么?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM