Javascript 提供客户端分页主干.js_Javascript_Jquery_Html_Backbone.js_Pagination

Javascript 提供客户端分页主干.js

javascript jquery html backbone.js pagination

Javascript 提供客户端分页主干.js,javascript,jquery,html,backbone.js,pagination,Javascript,Jquery,Html,Backbone.js,Pagination,我正在backbone.js中编写一个代码，我在尝试一次为15个项目分页时遇到了问题 <head> <title>Jay C. Davé</title> <link rel="stylesheet" href="./styles/bootstrap.css" /> <link rel="stylesheet" href="./styles/backgrid.css" /> <link rel="stylesheet" href="

我正在backbone.js中编写一个代码，我在尝试一次为15个项目分页时遇到了问题

<head>
<title>Jay C. Davé</title>
<link rel="stylesheet" href="./styles/bootstrap.css" />
<link rel="stylesheet" href="./styles/backgrid.css" />
<link rel="stylesheet" href="./styles/backgrid-paginator.css" />
</head>

<body>
<div id="main">
    <div class="col-md-12">
        <div id="grid"></div>
        <div id="paginator"></div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./lib/backbone.paginator.js"></script>
<script src="./lib/backgrid.js"></script>
<script src="./lib/backgrid.paginator.js"></script>

<script>
var columns = [{
    name: "quote",
    cell: "string",
    editable: false

}, {
    name: "context",
    cell: "string",
    editable: false
}, {
    name: "source",
    cell: "string",
    editable: false
}, {
    name: "theme",
    cell: "string",
    editable: false

}];
var Quotes = Backbone.PageableCollection.extend({
        url:"https://gist.githubusercontent.com/anonymous/8f61a8733ed7fa41c4ea/raw/1e90fd2741bb6310582e3822f59927eb535f6c73/quotes.json",
    mode: "client",
    state: {
        pageSize: 15
    }

});
var quotes = new Quotes();
var grid = new Backgrid.Grid({
    columns: columns,
    collection: quotes
});
var paginator = new Backgrid.Extension.Paginator({
    collection: quotes
});
$("#grid").append(grid.render().$el);
$("#paginator").append(paginator.render().$el);
quotes.fetch();
</script>
</body>

</html>

型号：

window.Quote = Backbone.Model.extend({});

<head>
<title>Jay C. Davé</title>
<link rel="stylesheet" href="./styles/bootstrap.css" />
<link rel="stylesheet" href="./styles/backgrid.css" />
<link rel="stylesheet" href="./styles/backgrid-paginator.css" />
</head>

<body>
<div id="main">
    <div class="col-md-12">
        <div id="grid"></div>
        <div id="paginator"></div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./lib/backbone.paginator.js"></script>
<script src="./lib/backgrid.js"></script>
<script src="./lib/backgrid.paginator.js"></script>

<script>
var columns = [{
    name: "quote",
    cell: "string",
    editable: false

}, {
    name: "context",
    cell: "string",
    editable: false
}, {
    name: "source",
    cell: "string",
    editable: false
}, {
    name: "theme",
    cell: "string",
    editable: false

}];
var Quotes = Backbone.PageableCollection.extend({
        url:"https://gist.githubusercontent.com/anonymous/8f61a8733ed7fa41c4ea/raw/1e90fd2741bb6310582e3822f59927eb535f6c73/quotes.json",
    mode: "client",
    state: {
        pageSize: 15
    }

});
var quotes = new Quotes();
var grid = new Backgrid.Grid({
    columns: columns,
    collection: quotes
});
var paginator = new Backgrid.Extension.Paginator({
    collection: quotes
});
$("#grid").append(grid.render().$el);
$("#paginator").append(paginator.render().$el);
quotes.fetch();
</script>
</body>

</html>

收藏：

window.Quotes = Backbone.Collection.extend({
model: Quote,
url: 'https://gist.githubusercontent.com/anonymous/8f61a8733ed7fa41c4ea/raw/1e90fd2741bb6310582e3822f59927eb535f6c73/quotes.json'
});

<head>
<title>Jay C. Davé</title>
<link rel="stylesheet" href="./styles/bootstrap.css" />
<link rel="stylesheet" href="./styles/backgrid.css" />
<link rel="stylesheet" href="./styles/backgrid-paginator.css" />
</head>

<body>
<div id="main">
    <div class="col-md-12">
        <div id="grid"></div>
        <div id="paginator"></div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./lib/backbone.paginator.js"></script>
<script src="./lib/backgrid.js"></script>
<script src="./lib/backgrid.paginator.js"></script>

<script>
var columns = [{
    name: "quote",
    cell: "string",
    editable: false

}, {
    name: "context",
    cell: "string",
    editable: false
}, {
    name: "source",
    cell: "string",
    editable: false
}, {
    name: "theme",
    cell: "string",
    editable: false

}];
var Quotes = Backbone.PageableCollection.extend({
        url:"https://gist.githubusercontent.com/anonymous/8f61a8733ed7fa41c4ea/raw/1e90fd2741bb6310582e3822f59927eb535f6c73/quotes.json",
    mode: "client",
    state: {
        pageSize: 15
    }

});
var quotes = new Quotes();
var grid = new Backgrid.Grid({
    columns: columns,
    collection: quotes
});
var paginator = new Backgrid.Extension.Paginator({
    collection: quotes
});
$("#grid").append(grid.render().$el);
$("#paginator").append(paginator.render().$el);
quotes.fetch();
</script>
</body>

</html>

单引号视图：

window.QuoteEntryView = Backbone.View.extend({
 tagName: "tr",
 template: _.template('<td><%- source %></td> <td><%- quote %></td> <td><%- theme %></td>'),
 render: function() {
 return this.$el.html(this.template(this.model.attributes));
 }
});

window.QuoteListView = Backbone.View.extend({
 tagName: "table",
 id: "myTable",
 className: "tablesorter",
 initialize: function() {
 this.collection.on('change', this.render, this);
 this.render();
 },
 render: function() {
 this.$el.children().detach();
 this.$el.html('<th>Source</th> <th>Quote</th> <th>Theme</th>').append(
  this.collection.map(function(quote){
    return new QuoteEntryView({ model: quote }).render();
  }) 
);
}
});

<head>
<title>Jay C. Davé</title>
<link rel="stylesheet" href="./styles/bootstrap.css" />
<link rel="stylesheet" href="./styles/backgrid.css" />
<link rel="stylesheet" href="./styles/backgrid-paginator.css" />
</head>

<body>
<div id="main">
    <div class="col-md-12">
        <div id="grid"></div>
        <div id="paginator"></div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./lib/backbone.paginator.js"></script>
<script src="./lib/backgrid.js"></script>
<script src="./lib/backgrid.paginator.js"></script>

<script>
var columns = [{
    name: "quote",
    cell: "string",
    editable: false

}, {
    name: "context",
    cell: "string",
    editable: false
}, {
    name: "source",
    cell: "string",
    editable: false
}, {
    name: "theme",
    cell: "string",
    editable: false

}];
var Quotes = Backbone.PageableCollection.extend({
        url:"https://gist.githubusercontent.com/anonymous/8f61a8733ed7fa41c4ea/raw/1e90fd2741bb6310582e3822f59927eb535f6c73/quotes.json",
    mode: "client",
    state: {
        pageSize: 15
    }

});
var quotes = new Quotes();
var grid = new Backgrid.Grid({
    columns: columns,
    collection: quotes
});
var paginator = new Backgrid.Extension.Paginator({
    collection: quotes
});
$("#grid").append(grid.render().$el);
$("#paginator").append(paginator.render().$el);
quotes.fetch();
</script>
</body>

</html>

window.QuoteEntryView=Backbone.View.extend({
标记名：“tr”，
模板：u.模板（“”），
render:function（）{
返回此.el.html（this.template（this.model.attributes））；
}
});

所有报价视图：

window.QuoteEntryView = Backbone.View.extend({
 tagName: "tr",
 template: _.template('<td><%- source %></td> <td><%- quote %></td> <td><%- theme %></td>'),
 render: function() {
 return this.$el.html(this.template(this.model.attributes));
 }
});

window.QuoteListView = Backbone.View.extend({
 tagName: "table",
 id: "myTable",
 className: "tablesorter",
 initialize: function() {
 this.collection.on('change', this.render, this);
 this.render();
 },
 render: function() {
 this.$el.children().detach();
 this.$el.html('<th>Source</th> <th>Quote</th> <th>Theme</th>').append(
  this.collection.map(function(quote){
    return new QuoteEntryView({ model: quote }).render();
  }) 
);
}
});

<head>
<title>Jay C. Davé</title>
<link rel="stylesheet" href="./styles/bootstrap.css" />
<link rel="stylesheet" href="./styles/backgrid.css" />
<link rel="stylesheet" href="./styles/backgrid-paginator.css" />
</head>

<body>
<div id="main">
    <div class="col-md-12">
        <div id="grid"></div>
        <div id="paginator"></div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./lib/backbone.paginator.js"></script>
<script src="./lib/backgrid.js"></script>
<script src="./lib/backgrid.paginator.js"></script>

<script>
var columns = [{
    name: "quote",
    cell: "string",
    editable: false

}, {
    name: "context",
    cell: "string",
    editable: false
}, {
    name: "source",
    cell: "string",
    editable: false
}, {
    name: "theme",
    cell: "string",
    editable: false

}];
var Quotes = Backbone.PageableCollection.extend({
        url:"https://gist.githubusercontent.com/anonymous/8f61a8733ed7fa41c4ea/raw/1e90fd2741bb6310582e3822f59927eb535f6c73/quotes.json",
    mode: "client",
    state: {
        pageSize: 15
    }

});
var quotes = new Quotes();
var grid = new Backgrid.Grid({
    columns: columns,
    collection: quotes
});
var paginator = new Backgrid.Extension.Paginator({
    collection: quotes
});
$("#grid").append(grid.render().$el);
$("#paginator").append(paginator.render().$el);
quotes.fetch();
</script>
</body>

</html>

window.QuoteListView=Backbone.View.extend({
标记名：“表”，
id:“myTable”，
类名：“表排序器”，
初始化：函数（）{
this.collection.on（'change'，this.render，this））；
这个。render（）；
},
render:function（）{
此.$el.children（）.detach（）；
此.el.html（'Source Quote Theme'）.append(
this.collection.map（函数（引号）{
返回新的QuoteEntryView（{model:quote}）.render（）；
}) 
);
}
});

HTML:

<head>
<title>Jay C. Davé</title>
<link rel="stylesheet" href="./styles/bootstrap.css" />
<link rel="stylesheet" href="./styles/backgrid.css" />
<link rel="stylesheet" href="./styles/backgrid-paginator.css" />
</head>

<body>
<div id="main">
    <div class="col-md-12">
        <div id="grid"></div>
        <div id="paginator"></div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./lib/backbone.paginator.js"></script>
<script src="./lib/backgrid.js"></script>
<script src="./lib/backgrid.paginator.js"></script>

<script>
var columns = [{
    name: "quote",
    cell: "string",
    editable: false

}, {
    name: "context",
    cell: "string",
    editable: false
}, {
    name: "source",
    cell: "string",
    editable: false
}, {
    name: "theme",
    cell: "string",
    editable: false

}];
var Quotes = Backbone.PageableCollection.extend({
        url:"https://gist.githubusercontent.com/anonymous/8f61a8733ed7fa41c4ea/raw/1e90fd2741bb6310582e3822f59927eb535f6c73/quotes.json",
    mode: "client",
    state: {
        pageSize: 15
    }

});
var quotes = new Quotes();
var grid = new Backgrid.Grid({
    columns: columns,
    collection: quotes
});
var paginator = new Backgrid.Extension.Paginator({
    collection: quotes
});
$("#grid").append(grid.render().$el);
$("#paginator").append(paginator.render().$el);
quotes.fetch();
</script>
</body>

</html>


$（函数（）{
var postFetchBoot=函数（集合）{
$（“#主视图”）.append（新的QuoteListView({
收藏：收藏
})（亿美元）；
};
new Quotes（）.fetch({
成功：postFetchBoot
});
});

我已经包括了我的全部代码。我曾尝试使用“主干分页器”，但在尝试将其附加到代码时遇到问题。如果有人能帮忙，请谢谢

经过一段时间的胡闹，我终于让它开始工作了。

<head>
<title>Jay C. Davé</title>
<link rel="stylesheet" href="./styles/bootstrap.css" />
<link rel="stylesheet" href="./styles/backgrid.css" />
<link rel="stylesheet" href="./styles/backgrid-paginator.css" />
</head>

<body>
<div id="main">
    <div class="col-md-12">
        <div id="grid"></div>
        <div id="paginator"></div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./lib/backbone.paginator.js"></script>
<script src="./lib/backgrid.js"></script>
<script src="./lib/backgrid.paginator.js"></script>

<script>
var columns = [{
    name: "quote",
    cell: "string",
    editable: false

}, {
    name: "context",
    cell: "string",
    editable: false
}, {
    name: "source",
    cell: "string",
    editable: false
}, {
    name: "theme",
    cell: "string",
    editable: false

}];
var Quotes = Backbone.PageableCollection.extend({
        url:"https://gist.githubusercontent.com/anonymous/8f61a8733ed7fa41c4ea/raw/1e90fd2741bb6310582e3822f59927eb535f6c73/quotes.json",
    mode: "client",
    state: {
        pageSize: 15
    }

});
var quotes = new Quotes();
var grid = new Backgrid.Grid({
    columns: columns,
    collection: quotes
});
var paginator = new Backgrid.Extension.Paginator({
    collection: quotes
});
$("#grid").append(grid.render().$el);
$("#paginator").append(paginator.render().$el);
quotes.fetch();
</script>
</body>

</html>

我已经包括了我重新工作的html

<head>
<title>Jay C. Davé</title>
<link rel="stylesheet" href="./styles/bootstrap.css" />
<link rel="stylesheet" href="./styles/backgrid.css" />
<link rel="stylesheet" href="./styles/backgrid-paginator.css" />
</head>

<body>
<div id="main">
    <div class="col-md-12">
        <div id="grid"></div>
        <div id="paginator"></div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./lib/backbone.paginator.js"></script>
<script src="./lib/backgrid.js"></script>
<script src="./lib/backgrid.paginator.js"></script>

<script>
var columns = [{
    name: "quote",
    cell: "string",
    editable: false

}, {
    name: "context",
    cell: "string",
    editable: false
}, {
    name: "source",
    cell: "string",
    editable: false
}, {
    name: "theme",
    cell: "string",
    editable: false

}];
var Quotes = Backbone.PageableCollection.extend({
        url:"https://gist.githubusercontent.com/anonymous/8f61a8733ed7fa41c4ea/raw/1e90fd2741bb6310582e3822f59927eb535f6c73/quotes.json",
    mode: "client",
    state: {
        pageSize: 15
    }

});
var quotes = new Quotes();
var grid = new Backgrid.Grid({
    columns: columns,
    collection: quotes
});
var paginator = new Backgrid.Extension.Paginator({
    collection: quotes
});
$("#grid").append(grid.render().$el);
$("#paginator").append(paginator.render().$el);
quotes.fetch();
</script>
</body>

</html>

Html:

<head>
<title>Jay C. Davé</title>
<link rel="stylesheet" href="./styles/bootstrap.css" />
<link rel="stylesheet" href="./styles/backgrid.css" />
<link rel="stylesheet" href="./styles/backgrid-paginator.css" />
</head>

<body>
<div id="main">
    <div class="col-md-12">
        <div id="grid"></div>
        <div id="paginator"></div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./lib/backbone.paginator.js"></script>
<script src="./lib/backgrid.js"></script>
<script src="./lib/backgrid.paginator.js"></script>

<script>
var columns = [{
    name: "quote",
    cell: "string",
    editable: false

}, {
    name: "context",
    cell: "string",
    editable: false
}, {
    name: "source",
    cell: "string",
    editable: false
}, {
    name: "theme",
    cell: "string",
    editable: false

}];
var Quotes = Backbone.PageableCollection.extend({
        url:"https://gist.githubusercontent.com/anonymous/8f61a8733ed7fa41c4ea/raw/1e90fd2741bb6310582e3822f59927eb535f6c73/quotes.json",
    mode: "client",
    state: {
        pageSize: 15
    }

});
var quotes = new Quotes();
var grid = new Backgrid.Grid({
    columns: columns,
    collection: quotes
});
var paginator = new Backgrid.Extension.Paginator({
    collection: quotes
});
$("#grid").append(grid.render().$el);
$("#paginator").append(paginator.render().$el);
quotes.fetch();
</script>
</body>

</html>


杰伊·C·达维
变量列=[{
名称：“报价”，
单元格：“字符串”，
可编辑：false
}, {
名称：“上下文”，
单元格：“字符串”，
可编辑：false
}, {
名称：“来源”，
单元格：“字符串”，
可编辑：false
}, {
名称：“主题”，
单元格：“字符串”，
可编辑：false
}];
var Quotes=Backbone.PageableCollection.extend({
url:“https://gist.githubusercontent.com/anonymous/8f61a8733ed7fa41c4ea/raw/1e90fd2741bb6310582e3822f59927eb535f6c73/quotes.json",
模式：“客户端”，
声明：{
页面大小：15
}
});
var quotes=新引号（）；
var grid=新的Backgrid.grid({
列：列，
收藏：引文
});
var paginator=new Backgrid.Extension.paginator({
收藏：引文
});
$（“#grid”）.append（grid.render（）.$el）；
$（“#paginator”）.append（paginator.render（）.$el）；
quotes.fetch（）；

您尝试过主干网.PageableCollection而不是主干网.Collection吗？@Molda，我尝试过，但是我找不到任何好的示例来了解如何实现所有功能，还需要使用backgrid.js吗？嘿@JayDave谢谢分享答案。这正是我想要的，并且发现很难操纵客户端分页。