如何启用Bootstrap表分页和搜索?

布莱恩·J

我一直遵循有关向Bootstrap表添加分页的两个指南,但是当我添加所需的链接和脚本时,分页或搜索不会在bootstrap表上呈现。

我尝试按照此解决方案的建议将jQuery引用放在head标签的开头,但这没什么区别。

我确定这只是外部库cdn引用的顺序不匹配,但我不确定正确的顺序。

我还检查了脚本是否引用了正确的表,即“升级”

问题:

如何组织jquerybootstrap引用以显示表分页?

标记:(视图标记的要点)

<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>

    <link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container body-content">
        <div class="page-header">
            <label class="heading">History</label>
            <div class="form-group">
                <fieldset>
                    <form action="" class="form-group" method="post">
                        <div class="table-responsive">
                            <div class="table-responsive">                            

                                <table id="escalation" class="table table-striped table-bordered" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th>Application</th>
                                            <th>EMOPOP</th>
                                            <th>Stats</th>
                                            <th>Statement</th>
                                            <th>Time</th>
                                            <th>Updated</th>
                                            <th>Details</th>
                                            <th>Price</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Tiger Nixon</td>
                                            <td>System Architect</td>
                                            <td>Edinburgh</td>
                                            <td>61</td>
                                            <td>2011/04/25</td>
                                            <td>$320,800</td>
                                            <td>2011/04/25</td>
                                            <td>$320,800</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </form>            <!--END OF FORM ^^-->
                </fieldset>
            </div>
            <hr />
        </div>
    </div>
</body>
<script>
    $(document).ready(function () {
        $('#escalation').dataTable();
    });
</script>
布莱恩·J

万一其他人有类似问题,答案将保留在我的布局页面中。这意味着包含表的视图中的引用无效。

我将layout.cshtml中的引用更新为,jquery 1.9+并且还必须注释掉以下阻止脚本呈现的内容:

//commented out
//@Scripts.Render("~/bundles/jquery")
//@RenderSection("scripts", required: false)

这是在类似的问题中提出的:

MVC 4 Razor对象不支持属性或方法“ dataTable”

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在数据表中显示分页和搜索以及按钮

来自分类Dev

ng2-bootstrap分页和bootstrap表集成错误

来自分类Dev

向实时流表添加过滤,搜索和分页

来自分类Dev

Codeigniter:搜索和分页

来自分类Dev

如何使用包含分页的jquery在表中搜索?

来自分类Dev

如何在搜索排序、分页 MVC 中使用表连接

来自分类Dev

如何启用和禁用Twitter Bootstrap按钮?

来自分类Dev

如何使用MySQL和PHP对多个搜索结果进行分页?

来自分类Dev

如何使用Angular.js和UI Bootstrap创建分页

来自分类Dev

如何使用ngrepeat和bootstrap ui使用angularjs创建分页?

来自分类Dev

如何使用Angular.js和UI Bootstrap创建分页

来自分类Dev

表分页[Bootstrap-Django]

来自分类Dev

Bootstrap 3 表分页错误

来自分类Dev

如何刮分页表

来自分类Dev

如何使用ngFilter过滤和搜索表?

来自分类Dev

使用搜索和排序功能在 php 渲染表上启用 jQuery 数据表

来自分类Dev

启用了水平滚动和分页的UICollectionViewLayout

来自分类Dev

启用了水平滚动和分页的UICollectionViewLayout

来自分类Dev

如何对使用UI Bootstrap分页进行分页的AngularJS中的所有记录进行排序和筛选

来自分类Dev

php和html框架显示带有搜索输入的分页表

来自分类Dev

在启用分页和滚动的情况下启用uiscrollview的缩放

来自分类Dev

Bootstrap + AngularJS-如何对表列进行排序/搜索/编辑/分页

来自分类Dev

如何使用Novell.Directory.Ldap.NETStandard和“简单分页结果”控件在Ldap服务器上进行分页搜索?

来自分类Dev

CodeIgniter搜索输入和分页URL

来自分类Dev

C#中的gridview搜索和分页

来自分类Dev

Codeigniter Mysql Ajax分页排序和搜索

来自分类Dev

CodeIgniter分页,排序方式和搜索

来自分类Dev

如何使用具有不同跳过和限制值的相同查询对搜索结果进行分页

来自分类Dev

如何使搜索结果和分页在单击到下一页时不会消失?

Related 相关文章

  1. 1

    如何在数据表中显示分页和搜索以及按钮

  2. 2

    ng2-bootstrap分页和bootstrap表集成错误

  3. 3

    向实时流表添加过滤,搜索和分页

  4. 4

    Codeigniter:搜索和分页

  5. 5

    如何使用包含分页的jquery在表中搜索?

  6. 6

    如何在搜索排序、分页 MVC 中使用表连接

  7. 7

    如何启用和禁用Twitter Bootstrap按钮?

  8. 8

    如何使用MySQL和PHP对多个搜索结果进行分页?

  9. 9

    如何使用Angular.js和UI Bootstrap创建分页

  10. 10

    如何使用ngrepeat和bootstrap ui使用angularjs创建分页?

  11. 11

    如何使用Angular.js和UI Bootstrap创建分页

  12. 12

    表分页[Bootstrap-Django]

  13. 13

    Bootstrap 3 表分页错误

  14. 14

    如何刮分页表

  15. 15

    如何使用ngFilter过滤和搜索表?

  16. 16

    使用搜索和排序功能在 php 渲染表上启用 jQuery 数据表

  17. 17

    启用了水平滚动和分页的UICollectionViewLayout

  18. 18

    启用了水平滚动和分页的UICollectionViewLayout

  19. 19

    如何对使用UI Bootstrap分页进行分页的AngularJS中的所有记录进行排序和筛选

  20. 20

    php和html框架显示带有搜索输入的分页表

  21. 21

    在启用分页和滚动的情况下启用uiscrollview的缩放

  22. 22

    Bootstrap + AngularJS-如何对表列进行排序/搜索/编辑/分页

  23. 23

    如何使用Novell.Directory.Ldap.NETStandard和“简单分页结果”控件在Ldap服务器上进行分页搜索?

  24. 24

    CodeIgniter搜索输入和分页URL

  25. 25

    C#中的gridview搜索和分页

  26. 26

    Codeigniter Mysql Ajax分页排序和搜索

  27. 27

    CodeIgniter分页,排序方式和搜索

  28. 28

    如何使用具有不同跳过和限制值的相同查询对搜索结果进行分页

  29. 29

    如何使搜索结果和分页在单击到下一页时不会消失?

热门标签

归档