https://github.com/cable8mm/jquery-infinite-with-template
infiniteScrollWithTemplate - JQuery plugin for ajax-enabled infinite page scroll / auto paging with template
https://github.com/cable8mm/jquery-infinite-with-template
infinite-scroll javascript jquery-ajax jquery-plugin
Last synced: 19 days ago
JSON representation
infiniteScrollWithTemplate - JQuery plugin for ajax-enabled infinite page scroll / auto paging with template
- Host: GitHub
- URL: https://github.com/cable8mm/jquery-infinite-with-template
- Owner: cable8mm
- License: mit
- Created: 2021-01-13T14:37:39.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-02-02T09:26:07.000Z (over 2 years ago)
- Last Synced: 2025-09-21T11:55:27.165Z (9 months ago)
- Topics: infinite-scroll, javascript, jquery-ajax, jquery-plugin
- Language: JavaScript
- Homepage:
- Size: 37.1 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# jQuery Infinite With Template Plugin
JQuery plugin for ajax-enabled infinite page scroll with template.
If you like jQuery until now, this little library will help.
## Install
on npm
```sh
npm i @cable8mm/jquery-infinite-with-template
```
on html
```html
```
on ESM
```html
import @cable8mm/jquery-infinite-with-template from https://cdn.jsdelivr.net/npm/@cable8mm/jquery-infinite-with-template@1.0.4/+esm
```
## Demo
For convinient `http-server` need:
```bash
git clone https://github.com/cable8mm/jquery-infinite-with-template
cd jquery-infinite-with-template
http-server .
```
and visit http://127.0.0.1:8080/examples/
If you are not installed `http-server`, refer to https://www.npmjs.com/package/http-server
You can regenerate data_sources:
```bash
# permission required
./examples/generate > data_sources.ajax
```
## Usage sample
Javascript part:
```Javascript
$("#result").infiniteTemplate({
templateSelector: "#test-tmpl",
dataPath: "data_sources.ajax",
query: "word=ajax",
templateHelpers: {
authId : 354
},
zeroCallback: function () {
alert("zero alert");
},
});
```
HTML part:
```html
<p>{{:id}}. {{:title}} [user:{{:authId}}]</p>
```
AJAX part: `data_sources.ajax`. This should return Ajax:
```javascript
{
"data": [
{
"id": 885,
"title": "iGFIJUSPp8oXoBDqoRXKK0VEAU0IBG(word=ajax)"
},
{
"id": 277,
"title": "HM3iPLDwd3nQKNH5eOkaOh5QlSb92F(word=ajax)"
},
{
"id": 583,
"title": "O2X0VQeWFGIRQPcVquYwHx49VNhwX3(word=ajax)"
},
...even more rows
}
```
Result:
```html
885. iGFIJUSPp8oXoBDqoRXKK0VEAU0IBG(word=ajax) [user:354]
277. HM3iPLDwd3nQKNH5eOkaOh5QlSb92F(word=ajax) [user:354]
583. O2X0VQeWFGIRQPcVquYwHx49VNhwX3(word=ajax) [user:354]
179. vrEwi7hgVucCEDmuO7pOf4Gzk4gmyh(word=ajax) [user:354]
380. yviF2uDLyySLZaAPs3bKNbSZfHeQA7(word=ajax) [user:354]
329. 865t05x9DMngrETccBuqrY7ts9Xt3R(word=ajax) [user:354]
84. D6mhKuRA06ONCE5HbswSwPjZvp0bUh(word=ajax) [user:354]
528. saWL46OBtTDGIBuZL9TkmfBvPXiRqM(word=ajax) [user:354]
522. PBe0jjP1Egy6NWpHzuA86JHupxNGvc(word=ajax) [user:354]
115. vBmfL7osq2VAKIktVznrC6QZzYpc1H(word=ajax) [user:354]
722. mti7aMut4TxAygKAdfGylml9QgJoDN(word=ajax) [user:354]
401. 06kgapSQylxWJOvFmDNLIcvpSPMB7V(word=ajax) [user:354]
245. UD0TP3bMU7J4mAlGqwo52F1I0rJIyR(word=ajax) [user:354]
985. 3xSyr0m68K3Ec6y8vJgIhYgSfgcGnG(word=ajax) [user:354]
78. DWpWRzx1x4Ibfh1Gn0Lk0F3aufu34d(word=ajax) [user:354]
573. iINBTozeMIeZguTU6lLB9j76zNZ4AK(word=ajax) [user:354]
946. OEuUblddtI9vqlyL89nDXizhvryn4e(word=ajax) [user:354]
756. wsBL8dxDf6UjTiNWNnnX4XAlAonHBM(word=ajax) [user:354]
66. q3irGi5lNUXccTDTDfl2jRlzVp04uk(word=ajax) [user:354]
20. vcq8sKN4RhCEoFLVW2vbX2eR14EKp8(word=ajax) [user:354]
```
## Options
**templateSelector** - (required) jsRender template identify
**dataPath** - (required) URL to load more data via AJAX
**templateHelpers** - (optional) Merge with json to load
**key** - (optional) data(default)
**query** - (optional) Additional query
**method** - (optional) GET(default), POST, PUT, DELETE
**loadAtStart** - (optional) true(default), false
**loadSelector** - (optional) if it set, it load more data every time the selector clicked
**initialPage** - (optional) 1(default)
**preventCache** - (optional) false(default) if true, Add timestamp
**zeroCallback** - (optional) null(default) if function, call zeroCallback when result is nothing
## Examples
```html
// https://m.holapet.com/adoption
@foreach($adoptions as $item)
@endforeach
$("#adoption-rounded-card-list").infiniteTemplate({
templateSelector: "#adoption-rounded-card-tmpl",
dataPath: "/api/adoption",
initialPage: 3,
});
```
```html
// https://m.holapet.com/place/pensions/region/1
@foreach($region->placesRecent as $item)
@endforeach
$("#place-rounded-card-list").infiniteTemplate({
templateSelector: "#place-rounded-card-tmpl",
dataPath: "/api/place/pensions/region/{{ $region->id }}",
initialPage: 3,
templateHelpers: {
minColumnCount: 1
}
});
```
```html
// https://m.holapet.com/search/show?word=%ED%8F%AC%EB%A9%94%EB%9D%BC%EB%8B%88%EC%95%88
@include('shared.jtemplate.search-user')
@auth
$("#user-list").infiniteTemplate({
templateSelector: "#user-tmpl",
dataPath: "/api/user",
query: "word={{ $word }}",
templateHelpers: {
authId : {{ Auth::id() ?? 0 }},
followeeIds: {!! Auth::user()->followee_ids->toJson() ?? 'false' !!}
}
});
@endauth
@guest
$("#user-list").infiniteTemplate({
templateSelector: "#user-tmpl",
dataPath: "/api/user",
query: "word={{ $word }}",
});
@endguest
```
```html
// https://m.holapet.com/story/hot
@if(!empty($hotStories))
@foreach($hotStories as $item)
@endforeach
@endif
$("#story-grid-card-list").infiniteTemplate({
templateSelector: "#story-grid-card-tmpl",
dataPath: "/api/story/hot",
initialPage: 3,
});
```
The jQuery Infinite With Template Plugin project is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).