Interactive Features

Search

dbind_search

Create a search input that filters displayed items.

<input
  type="text"
  dbind_search="products"
  placeholder="Search products..."
>

<div dbind_repeat="products">
  <h3 dbind_data="name"></h3>
  <p dbind_data="description"></p>
</div>

The search filters items based on all text content in each item.

Search Options

Search is debounced (300ms delay) for performance. The search is case-insensitive and searches across all fields.

<div class="search-container">
  <input
    type="text"
    dbind_search="items"
    placeholder="Type to search..."
    class="search-input"
  >
</div>

Pagination

dbind_paginate

Add pagination controls to a list.

<div dbind_repeat="products" dbind_paginate="10">
  <div class="product-card">
    <h3 dbind_data="name"></h3>
    <span dbind_data="price"></span>
  </div>
</div>

The number specifies items per page. Pagination controls are automatically added after the container.

Pagination Controls

DBindly automatically generates pagination buttons:

• First page button
• Previous page button
• Page numbers (with ellipsis for many pages)
• Next page button
• Last page button

Styling Pagination

The pagination controls use these CSS classes:

.dbindly-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}

.dbindly-pagination button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.dbindly-pagination button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.dbindly-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Load More

dbind_loadmore

Create a "Load More" button instead of pagination.

<div dbind_repeat="products" dbind_loadmore="10">
  <div class="product-card">
    <h3 dbind_data="name"></h3>
  </div>
</div>

The number specifies how many items to load initially and on each click.

Load More Button

The button is automatically added after the container with the class dbindly-loadmore:

.dbindly-loadmore {
  display: block;
  width: 100%;
  padding: 12px 24px;
  margin-top: 20px;
  background: #f0f0f0;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.dbindly-loadmore:hover {
  background: #e0e0e0;
}

Combining Features

Search + Pagination

<div class="products-section">
  <input
    type="text"
    dbind_search="products"
    placeholder="Search products..."
    class="search-input"
  >

  <div dbind_repeat="products" dbind_paginate="12" dbind_sort="name:asc">
    <div class="product-card">
      <img dbind_src="image" dbind_alt="name">
      <h3 dbind_data="name"></h3>
      <p dbind_data="price"></p>
    </div>
  </div>
</div>

Filter + Search + Load More

<div class="blog-section">
  <input
    type="text"
    dbind_search="posts"
    placeholder="Search posts..."
  >

  <div
    dbind_repeat="posts"
    dbind_filter="published:true"
    dbind_sort="date:desc"
    dbind_loadmore="6"
  >
    <article class="post-card">
      <img dbind_src="image" dbind_alt="title">
      <h2 dbind_data="title"></h2>
      <p dbind_data="excerpt"></p>
      <span dbind_data="date"></span>
    </article>
  </div>
</div>

JavaScript API

Fetch Collection with Options

// Fetch collection data programmatically
const result = await DBindly.fetchCollection('products', {
  page: 1,
  limit: 20,
  sort: 'price',
  order: 'asc'
});

console.log(result.data);      // Array of items
console.log(result.total);     // Total count
console.log(result.page);      // Current page
console.log(result.totalPages); // Total pages

Render Collection

// Render collection to a container
await DBindly.renderCollection('products', {
  limit: 10,
  sort: 'createdAt',
  order: 'desc'
});

Get Metrics

// Get performance metrics
const metrics = DBindly.getMetrics();
console.log(metrics.cacheHitRate);    // Cache hit percentage
console.log(metrics.averageLoadTime); // Average load time in ms

Complete Example: Product Catalog

<div class="catalog">
  <!-- Search -->
  <div class="search-bar">
    <input
      type="text"
      dbind_search="products"
      placeholder="Search products..."
    >
  </div>

  <!-- Products Grid -->
  <div
    class="products-grid"
    dbind_repeat="products"
    dbind_filter="available:true"
    dbind_sort="price:asc"
    dbind_paginate="12"
  >
    <div class="product-card">
      <img dbind_src="image" dbind_alt="name">
      <h3 dbind_data="name"></h3>
      <p dbind_data="description"></p>
      <div class="product-footer">
        <span dbind_data="price" class="price"></span>
        <span dbind_if="onSale==true" class="sale-badge">Sale</span>
      </div>
      <a dbind_href="url" class="btn">View Details</a>
    </div>
  </div>
</div>

<style>
  .catalog {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  .search-bar {
    margin-bottom: 20px;
  }

  .search-bar input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }

  .product-card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
  }
</style>

Next Steps

• API Endpoints - REST API documentation
• Examples - Complete working examples