جداول پیشرفته

فالکون از List.Js برای جدول پیشروی استفاده می کند. List.Js یک کتابخانه جاوا اسکریپت وانیلی کوچک، نامرئی و ساده، در عین حال قدرتمند و فوق‌العاده سریع است که جستجو، مرتب‌سازی، فیلترها و انعطاف‌پذیری را به فهرست‌های HTML ساده، جداول یا هر چیز دیگری اضافه می‌کند.

اسناد برای List.js
مثال جدول
نام پست الکترونیک سن
آنا 18
هومر 35
اسکار 52
امیلی 30
جارا 25
کلارک 39
جنیفر 52
تونی 30
تام 25
مایکل 39
آنتونی 39
ریموند 52
ماری 30
کوهن 25
روون 39

- مشاهده همهView Less 

<div id="tableExample" data-list='{"valueNames":["name","email","age"],"page":5,"pagination":true}'>
  <div class="table-responsive scrollbar">
    <table class="table table-bordered table-striped fs--1 mb-0">
      <thead class="bg-200 text-900">
        <tr>
          <th class="sort" data-sort="name">Name</th>
          <th class="sort" data-sort="email">Email</th>
          <th class="sort" data-sort="age">Age</th>
        </tr>
      </thead>
      <tbody class="list">
        <tr>
          <td class="name">Anna</td>
          <td class="email">anna@example.com</td>
          <td class="age">18</td>
        </tr>
        <tr>
          <td class="name">Homer</td>
          <td class="email">homer@example.com</td>
          <td class="age">35</td>
        </tr>
        <tr>
          <td class="name">Oscar</td>
          <td class="email">oscar@example.com</td>
          <td class="age">52</td>
        </tr>
        <tr>
          <td class="name">Emily</td>
          <td class="email">emily@example.com</td>
          <td class="age">30</td>
        </tr>
        <tr>
          <td class="name">Jara</td>
          <td class="email">jara@example.com</td>
          <td class="age">25</td>
        </tr>
        <tr>
          <td class="name">Clark</td>
          <td class="email">clark@example.com</td>
          <td class="age">39</td>
        </tr>
        <tr>
          <td class="name">Jennifer</td>
          <td class="email">jennifer@example.com</td>
          <td class="age">52</td>
        </tr>
        <tr>
          <td class="name">Tony</td>
          <td class="email">tony@example.com</td>
          <td class="age">30</td>
        </tr>
        <tr>
          <td class="name">Tom</td>
          <td class="email">tom@example.com</td>
          <td class="age">25</td>
        </tr>
        <tr>
          <td class="name">Michael</td>
          <td class="email">michael@example.com</td>
          <td class="age">39</td>
        </tr>
        <tr>
          <td class="name">Antony</td>
          <td class="email">antony@example.com</td>
          <td class="age">39</td>
        </tr>
        <tr>
          <td class="name">Raymond</td>
          <td class="email">raymond@example.com</td>
          <td class="age">52</td>
        </tr>
        <tr>
          <td class="name">Marie</td>
          <td class="email">marie@example.com</td>
          <td class="age">30</td>
        </tr>
        <tr>
          <td class="name">Cohen</td>
          <td class="email">cohen@example.com</td>
          <td class="age">25</td>
        </tr>
        <tr>
          <td class="name">Rowen</td>
          <td class="email">rowen@example.com</td>
          <td class="age">39</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="row align-items-center mt-3">
    <div class="pagination d-none"></div>
    <div class="col">
      <p class="mb-0 fs--1">
        <span class="d-none d-sm-inline-block" data-list-info="data-list-info"></span>
        <span class="d-none d-sm-inline-block"> &mdash; </span>
        <a class="fw-semi-bold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a><a class="fw-semi-bold d-none" href="#!" data-list-view="less">View Less<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
      </p>
    </div>
    <div class="col-auto d-flex"><button class="btn btn-sm btn-primary" type="button" data-list-pagination="prev"><span>Previous</span></button><button class="btn btn-sm btn-primary px-4 ms-2" type="button" data-list-pagination="next"><span>Next</span></button></div>
  </div>
</div>
صفحه بندی با شماره گذاری

pagination برای فعال کردن صفحه بندی اعداد، کلاس اضافه کنید. ساختار زیر صفحه بندی اعداد را با دکمه بعدی و قبلی فعال می کند.

نام پست الکترونیک سن
آنا 18
هومر 35
اسکار 52
امیلی 30
جارا 25
کلارک 39
جنیفر 52
تونی 30
تام 25
مایکل 39
آنتونی 39
ریموند 52
ماری 30
کوهن 25
روون 39 
    <div id="tableExample2" data-list='{"valueNames":["name","email","age"],"page":5,"pagination":true}'>
  <div class="table-responsive scrollbar">
    <table class="table table-bordered table-striped fs--1 mb-0">
      <thead class="bg-200 text-900">
        <tr>
          <th class="sort" data-sort="name">Name</th>
          <th class="sort" data-sort="email">Email</th>
          <th class="sort" data-sort="age">Age</th>
        </tr>
      </thead>
      <tbody class="list">
        <tr>
          <td class="name">Anna</td>
          <td class="email">anna@example.com</td>
          <td class="age">18</td>
        </tr>
        <tr>
          <td class="name">Homer</td>
          <td class="email">homer@example.com</td>
          <td class="age">35</td>
        </tr>
        <tr>
          <td class="name">Oscar</td>
          <td class="email">oscar@example.com</td>
          <td class="age">52</td>
        </tr>
        <tr>
          <td class="name">Emily</td>
          <td class="email">emily@example.com</td>
          <td class="age">30</td>
        </tr>
        <tr>
          <td class="name">Jara</td>
          <td class="email">jara@example.com</td>
          <td class="age">25</td>
        </tr>
        <tr>
          <td class="name">Clark</td>
          <td class="email">clark@example.com</td>
          <td class="age">39</td>
        </tr>
        <tr>
          <td class="name">Jennifer</td>
          <td class="email">jennifer@example.com</td>
          <td class="age">52</td>
        </tr>
        <tr>
          <td class="name">Tony</td>
          <td class="email">tony@example.com</td>
          <td class="age">30</td>
        </tr>
        <tr>
          <td class="name">Tom</td>
          <td class="email">tom@example.com</td>
          <td class="age">25</td>
        </tr>
        <tr>
          <td class="name">Michael</td>
          <td class="email">michael@example.com</td>
          <td class="age">39</td>
        </tr>
        <tr>
          <td class="name">Antony</td>
          <td class="email">antony@example.com</td>
          <td class="age">39</td>
        </tr>
        <tr>
          <td class="name">Raymond</td>
          <td class="email">raymond@example.com</td>
          <td class="age">52</td>
        </tr>
        <tr>
          <td class="name">Marie</td>
          <td class="email">marie@example.com</td>
          <td class="age">30</td>
        </tr>
        <tr>
          <td class="name">Cohen</td>
          <td class="email">cohen@example.com</td>
          <td class="age">25</td>
        </tr>
        <tr>
          <td class="name">Rowen</td>
          <td class="email">rowen@example.com</td>
          <td class="age">39</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="d-flex justify-content-center mt-3"><button class="btn btn-sm btn-falcon-default me-1" type="button" title="Previous" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
    <ul class="pagination mb-0"></ul><button class="btn btn-sm btn-falcon-default ms-1" type="button" title="Next" data-list-pagination="next"><span class="fas fa-chevron-right"> </span></button>
  </div>
</div>
    مثال جستجو

    search برای فعال کردن جستجوی داده، کلاس اضافه کنید . ساختار زیر قابلیت جستجو را فعال می کند.

    نام پست الکترونیک سن
    آنا 18
    هومر 35
    اسکار 52
    امیلی 30
    جارا 25
    کلارک 39
    جنیفر 52
    تونی 30
    تام 25
    مایکل 39
    آنتونی 39
    ریموند 52
    ماری 30
    کوهن 25
    روون 39 
      <div id="tableExample3" data-list='{"valueNames":["name","email","age"],"page":5,"pagination":true}'> 
  <div class="row justify-content-end g-0"> 
    <div class="col-auto col-sm-5 mb-3"> 
      <form> 
        <div class="input-group"><input class="form-control form-control-sm shadow-none search" type="search" placeholder="Search..." aria-label="search" /> 
          <div class="input-group-text bg-transparent"><span class="fa fa-search fs--1 text-600"></span></div> 
        </div> 
      </form> 
    </div> 
  </div> 
  <div class="table-responsive scrollbar"> 
    <table class="table table-bordered table-striped fs--1 mb-0"> 
      <thead class="bg-200"> 
        <tr> 
          <th class="text-900 sort" data-sort="name">Name</th> 
          <th class="text-900 sort" data-sort="email">Email</th> 
          <th class="text-900 sort" data-sort="age">Age</th> 
        </tr> 
      </thead> 
      <tbody class="list"> 
        <tr> 
          <td class="name">Anna</td> 
          <td class="email">anna@example.com</td> 
          <td class="age">18</td> 
        </tr> 
        <tr> 
          <td class="name">Homer</td> 
          <td class="email">homer@example.com</td> 
          <td class="age">35</td> 
        </tr> 
        <tr> 
          <td class="name">Oscar</td> 
          <td class="email">oscar@example.com</td> 
          <td class="age">52</td> 
        </tr> 
        <tr> 
          <td class="name">Emily</td> 
          <td class="email">emily@example.com</td> 
          <td class="age">30</td> 
        </tr> 
        <tr> 
          <td class="name">Jara</td> 
          <td class="email">jara@example.com</td> 
          <td class="age">25</td> 
        </tr> 
        <tr> 
          <td class="name">Clark</td> 
          <td class="email">clark@example.com</td> 
          <td class="age">39</td> 
        </tr> 
        <tr> 
          <td class="name">Jennifer</td> 
          <td class="email">jennifer@example.com</td> 
          <td class="age">52</td> 
        </tr> 
        <tr> 
          <td class="name">Tony</td> 
          <td class="email">tony@example.com</td> 
          <td class="age">30</td> 
        </tr> 
        <tr> 
          <td class="name">Tom</td> 
          <td class="email">tom@example.com</td> 
          <td class="age">25</td> 
        </tr> 
        <tr> 
          <td class="name">Michael</td> 
          <td class="email">michael@example.com</td> 
          <td class="age">39</td> 
        </tr> 
        <tr> 
          <td class="name">Antony</td> 
          <td class="email">antony@example.com</td> 
          <td class="age">39</td> 
        </tr> 
        <tr> 
          <td class="name">Raymond</td> 
          <td class="email">raymond@example.com</td> 
          <td class="age">52</td> 
        </tr> 
        <tr> 
          <td class="name">Marie</td> 
          <td class="email">marie@example.com</td> 
          <td class="age">30</td> 
        </tr> 
        <tr> 
          <td class="name">Cohen</td> 
          <td class="email">cohen@example.com</td> 
          <td class="age">25</td> 
        </tr> 
        <tr> 
          <td class="name">Rowen</td> 
          <td class="email">rowen@example.com</td> 
          <td class="age">39</td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
  <div class="d-flex justify-content-center mt-3"><button class="btn btn-sm btn-falcon-default me-1" type="button" title="Previous" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button> 
    <ul class="pagination mb-0"></ul><button class="btn btn-sm btn-falcon-default ms-1" type="button" title="Next" data-list-pagination="next"><span class="fas fa-chevron-right"> </span></button> 
  </div> 
</div>
      مثال فیلتر
      مشتریان ایمیل پرداخت شده
      سیلویا پوبا موفق
      هامر درحال بررسی
      ادگار آلین مسدود شده
      ویلیام بوترنی موفق
      رابینسون ادوارد درحال بررسی
      امیلی کلارم مسدود شده
      گیوانی بوستون درحال بررسی
      اسکار وایلد موفق
      جان دویی موفق
      اما واستون درحال بررسی 
      <div id="tableExample3" data-list='{"valueNames":["name","email","payment"],"filter":true}'>
  <div class="row justify-content-end g-0">
    <div class="col-auto px-3"> <select class="form-select form-select-sm mb-3" aria-label="Bulk actions" data-list-filter="data-list-filter">
        <option selected="" value="">Select payment status</option>
        <option value="Pending">Pending</option>
        <option value="Success">Success</option>
        <option value="Blocked">Blocked</option>
      </select></div>
  </div>
  <div class="table-responsive scrollbar">
    <table class="table table-sm table-striped fs--1 mb-0 overflow-hidden">
      <thead class="bg-200 text-900">
        <tr>
          <th class="sort pe-1 align-middle white-space-nowrap" data-sort="name">Customer</th>
          <th class="sort pe-1 align-middle white-space-nowrap" data-sort="email">Email</th>
          <th class="sort align-middle white-space-nowrap text-end pe-4" data-sort="payment">Payment</th>
        </tr>
      </thead>
      <tbody class="list" id="table-purchase-body">
        <tr class="btn-reveal-trigger">
          <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Sylvia Plath</a></th>
          <td class="align-middle white-space-nowrap email">john@gmail.com</td>
          <td class="align-middle text-end fs-0 white-space-nowrap payment"> <span class="badge badge rounded-pill badge-subtle-success">Success<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
        </tr>
        <tr class="btn-reveal-trigger">
          <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Homer</a></th>
          <td class="align-middle white-space-nowrap email">sylvia@mail.ru</td>
          <td class="align-middle text-end fs-0 white-space-nowrap payment"> <span class="badge badge rounded-pill badge-subtle-warning">Pending<span class="ms-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
        </tr>
        <tr class="btn-reveal-trigger">
          <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Edgar Allan Poe</a></th>
          <td class="align-middle white-space-nowrap email">edgar@yahoo.com</td>
          <td class="align-middle text-end fs-0 white-space-nowrap payment"> <span class="badge badge rounded-pill badge-subtle-secondary">Blocked<span class="ms-1 fas fa-ban" data-fa-transform="shrink-2"></span></span></td>
        </tr>
        <tr class="btn-reveal-trigger">
          <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">William Butler Yeats</a></th>
          <td class="align-middle white-space-nowrap email">william@gmail.com</td>
          <td class="align-middle text-end fs-0 white-space-nowrap payment"> <span class="badge badge rounded-pill badge-subtle-success">Success<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
        </tr>
        <tr class="btn-reveal-trigger">
          <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Rabindranath Tagore</a></th>
          <td class="align-middle white-space-nowrap email">tagore@twitter.com</td>
          <td class="align-middle text-end fs-0 white-space-nowrap payment"> <span class="badge badge rounded-pill badge-subtle-warning">Pending<span class="ms-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
        </tr>
        <tr class="btn-reveal-trigger">
          <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Emily Dickinson</a></th>
          <td class="align-middle white-space-nowrap email">emily@gmail.com</td>
          <td class="align-middle text-end fs-0 white-space-nowrap payment"> <span class="badge badge rounded-pill badge-subtle-secondary">Blocked<span class="ms-1 fas fa-ban" data-fa-transform="shrink-2"></span></span></td>
        </tr>
        <tr class="btn-reveal-trigger">
          <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Giovanni Boccaccio</a></th>
          <td class="align-middle white-space-nowrap email">giovanni@outlook.com</td>
          <td class="align-middle text-end fs-0 white-space-nowrap payment"> <span class="badge badge rounded-pill badge-subtle-warning">Pending<span class="ms-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
        </tr>
        <tr class="btn-reveal-trigger">
          <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Oscar Wilde</a></th>
          <td class="align-middle white-space-nowrap email">oscar@hotmail.com</td>
          <td class="align-middle text-end fs-0 white-space-nowrap payment"> <span class="badge badge rounded-pill badge-subtle-success">Success<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
        </tr>
        <tr class="btn-reveal-trigger">
          <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">John Doe</a></th>
          <td class="align-middle white-space-nowrap email">doe@gmail.com</td>
          <td class="align-middle text-end fs-0 white-space-nowrap payment"> <span class="badge badge rounded-pill badge-subtle-success">Success<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
        </tr>
        <tr class="btn-reveal-trigger">
          <th class="align-middle white-space-nowrap name"><a href="../../app/e-commerce/customer-details.html">Emma Watson</a></th>
          <td class="align-middle white-space-nowrap email">emma@gmail.com</td>
          <td class="align-middle text-end fs-0 white-space-nowrap payment"> <span class="badge badge rounded-pill badge-subtle-warning">Pending<span class="ms-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
      اسناد

      با دنبال کردن این مراحل آسان، لیست را در فالکون ادغام کنید:

      • شناسه منحصر به فرد را تنظیم کنید و data-list ویژگی را به عنصر wrapper اضافه کنید و ستون خود را در valueNames ویژگی فهرست کنید.
        <div id="tableExample" data-list='{"valueNames":["name","email","age"]}'>

   <!-- Your list content will go here-->
 </div>
      • برای فعال کردن مرتب سازی در ستون خود، data-sort ویژگی اضافه کنید و نام ستون را به ویژگی اختصاص دهید.
        <th class="sort" data-sort="name">...</th>
      • list به عنصر محتوای بسته بندی کلاس اضافه کنید.
        <tbody class="list">

   <!-- Your value will go here-->
 </tbody>
      • سپس مقدار خود را با نام ستون به عنوان یک کلاس بپیچید. به عنوان مثال، اگر نام ستون شما name باشد، مقدار آن به شکل زیر خواهد بود:
        <td class="name">...</td>
      • برای اضافه کردن صفحه بندی، .pagination کلاس را در عنصر wrapper خود اضافه کنید
      • برای فعال کردن صفحه‌بندی دکمه‌ها، به ترتیب دکمه‌های «قبلی» و «بعدی» را اضافه data-list-pagination='prev' کنید data-list-pagination='next' .
      • برای مشاهده اطلاعات لیست، data-list-infoویژگی را به یک عنصر DOM در داخل عنصر wrapper خود اضافه کنید.
      جدول آجاکس

      این نمونه ای از جدول پیشرفته با استفاده از داده های خارجی است.

      سفارش تاریخ ارسال به وضعیت میزان
        نحوه استفاده

        اگر از گردش کار مبتنی بر Gulp استفاده می کنید، این مراحل آسان را دنبال کنید:

        • به میز خود یک شناسه منحصربفرد بدهید.
        • advanceAjaxTableInit() از تابع از در یک فایل JS جدید استفاده کنید src/js/theme/advance-ajax-table.js و شناسه را به روز کنید.
        • فایل را وارد کنید src/js/theme.js

        اگر از گردش کار مبتنی بر Gulp استفاده نمی کنید:

        • به میز خود یک شناسه منحصربفرد بدهید.
        • advanceAjaxTableInit() تابع را از theme.js, کپی کد پیدا کنید و شناسه را در یک تابع جدید به روز کنید. 
        <div class="table-list" id="advanceAjaxTable">
  <div class="table-responsive scrollbar mb-3">
    <table class="table table-sm table-striped fs--1 mb-0 overflow-hidden">
      <thead class="bg-200">
        <tr>
          <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="orderId">Order</th>
          <th class="text-900 sort pe-1 align-middle white-space-nowrap pe-7" data-sort="date">Date</th>
          <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="address" style="min-width: 12.5rem;">Ship To</th>
          <th class="text-900 sort pe-1 align-middle white-space-nowrap text-center" data-sort="status">Status</th>
          <th class="text-900 sort pe-1 align-middle white-space-nowrap text-end" data-sort="amount">Amount</th>
          <th class="no-sort"></th>
        </tr>
      </thead>
      <tbody class="list"></tbody>
    </table>
  </div>
  <div class="d-flex align-items-center justify-content-center"><button class="btn btn-sm btn-falcon-default me-1" type="button" title="Previous" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
    <ul class="pagination mb-0"></ul><button class="btn btn-sm btn-falcon-default ms-1" type="button" title="Next" data-list-pagination="next"><span class="fas fa-chevron-right"> </span></button>
  </div>
</div>
<div class="card-body">
  <h5 class="mb-3">How to use</h5>
  <p>If you are using Gulp based workflow, follow these easy steps:</p>
  <ul>
    <li>Give your table a unique ID.</li>
    <li>Use the <code>advanceAjaxTableInit() </code>function from <code>src/js/theme/advance-ajax-table.js </code>in a new JS file and update the ID.</li>
    <li>Import the file on <code>src/js/theme.js</code></li>
  </ul>
  <p>If you are not using Gulp based workflow:</p>
  <ul>
    <li>Give your table a unique ID.</li>
    <li>Find the <code>advanceAjaxTableInit() </code>function from <code>theme.js, </code>copy the code, and update the ID in a new function.</li>
  </ul>
</div>
        جاوا اسکریپت
        <script src="vendors/list.js/list.min.js"></script>

        ممنون که با فالکون خلق کردید

        نسخه 3.18.0

        تنظیمات

        سبک سفارشی خود را تنظیم کنید

        طرح رنگ بندی

        حالت رنگ مناسب را برای برنامه خود انتخاب کنید.

        RTL حالت

        جهت زبان خود را تغییر دهید

        RTL راهنما
        چیدمان سیال

        سیستم چیدمان کانتینر را تغییر دهید

        راهنما سیال
        موقعیت ناوبری

        یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید

        سبک ناوبری عمودی

        برای ناوبری عمودی خود بین سبک ها جابه جا شوید

        دیدن راهنما

        چیزی که میبینی را دوست داری؟

        برای خرید قالب فالکون از راستچین اقدام کنید.

        خرید
        شخصی سازی