Jquery Datagrid 无法显示答案

【问题标题】：Jquery Datagrid can not displayJquery Datagrid 无法显示
【发布时间】：2014-07-26 11:36:09
【问题描述】：

我参考下面的例子，

http://adamalex.github.io/fuelux-dgdemo/

我的代码：

更新：

       <!DOCTYPE html>
<html class="fuelux" lang="en">
   <head>
       <link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux.css" rel="stylesheet" />
       <link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux-responsive.css" rel="stylesheet" />
       <style>
          body {
             padding-top: 60px;
          }
       </style>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
</head>

<body data-spy="scroll" data-target=".subnav" data-offset="50">

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#">Fuel UX Datagrid</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li class="active"><a href="#">Demo</a></li>
                        <li><a href="https://github.com/ExactTarget/fuelux">GitHub</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container">

        <table id="MyGrid" class="table table-bordered datagrid">
            <thead>
                <tr>
                    <th>
                        <span class="datagrid-header-title">Flickr Search</span>
                        <div class="datagrid-header-left"></div>
                        <div class="datagrid-header-right">
                            <div class="input-append search">
                                <input type="text" class="input-medium" placeholder="Search"><button class="btn"><i class="icon-search"></i></button>
                            </div>
                        </div>
                    </th>
                </tr>
            </thead>

            <tfoot>
                <tr>
                    <th>
                        <div class="datagrid-footer-left" style="display:none;">
                            <div class="grid-controls">
                                <span><span class="grid-start"></span> - <span class="grid-end"></span> of <span class="grid-count"></span></span>
                                <select class="grid-pagesize"><option>5</option><option>10</option></select>
                                <span>Per Page</span>
                            </div>
                        </div>
                        <div class="datagrid-footer-right" style="display:none;">
                            <div class="grid-pager">
                                <button class="btn grid-prevpage"><i class="icon-chevron-left"></i></button>
                                <span>Page</span>
                                <div class="input-append dropdown combobox">
                                    <input class="span1" type="text">
                                </div>
                                <span>of <span class="grid-pages"></span></span>
                                <button class="btn grid-nextpage"><i class="icon-chevron-right"></i></button>
                            </div>
                        </div>
                    </th>
                </tr>
            </tfoot>
        </table>

    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://fuelux.exacttargetapps.com/fuelux/2.0/loader.min.js" type="text/javascript"></script>
    <script src="~/datasource.js"></script>
    <script>
        $('#MyGrid').datagrid({
            dataSource: new FlickrDataSource({

                columns: [{
                    property: 'image',
                    label: 'Image',
                    sortable: false
                }, {
                    property: 'title',
                    label: 'Title',
                    sortable: false
                }],

                formatter: function (items) {
                    $.each(items, function (index, item) {
                        item.image = '<img src="' + flickrUrl(item) + '"></a>';
                    });
                }
            })
        });

        function flickrUrl(image) {
            return 'http://farm' + image.farm + '.staticflickr.com/' + image.server + '/' + image.id + '_' + image.secret + '_t.jpg';
        }
    </script>

</body>
</html>

当我运行项目时，我会看到下面的页面

chrome浏览器控制台没有错误。

更新：

浏览器网络端：

我不知道我特别想念哪里？

我们将不胜感激。

谢谢。

【问题讨论】：

请你帮我谢谢
你应该遵循一个结构良好的结构，你应该把你的脚本和 css 文件引用放在 head 标签而不是外面。
我试过了但是同样的问题你有其他解决方案吗谢谢
查看发布的答案和 jsbin 链接。

标签： jquery datagrid fuelux

【解决方案1】：

对此进行更新，看看是否有帮助：

<!DOCTYPE html>
<html class="fuelux" lang="en">
   <head>
       <link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux.css" rel="stylesheet" />
       <link href="http://fuelux.exacttargetapps.com/fuelux/2.0/css/fuelux-responsive.css" rel="stylesheet" />
       <style>
          body {
             padding-top: 60px;
          }
       </style>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
</head>

See a Demo @ jsbin.

【讨论】：

是的，我可以看到，但这应该可以，但是如果一切正常，您可以查看网络选项卡。
您的应用程序页面中似乎没有加载任何内容，顺便说一句，您在刷新之前打开它了吗？
btw = 顺便说一句....关于刷新只需打开检查器并单击网络选项卡然后刷新页面。
再次更新请查看我的问题并查看网络图片谢谢

【解决方案2】：

很高兴 CSS 问题得到了解决。所有 FuelUX 控件都必须放在 .fuelux 类中。这与您的问题无关，但我建议通过FuelUX CDN 使用最新的 2.x 版本的 FuelUX。不过，我们目前正在开发 FuelUX 3，希望能在今年夏天推出。

【讨论】：