我参考下面的例子，
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浏览器控制台上没有错误。
更新：
浏览器网络端：
我不知道我特别想念哪里？
任何帮助将不胜感激。
谢谢。