قالب مدیریتی شاهین فالکون | پیشخوان & اپلیکیشن تحت وب

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

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

اسناد برای List.js

مثال جدول

نام	پست الکترونیک	سن
آنا	anna@example.com	18
هومر	homer@example.com	35
اسکار	oscar@example.com	52
امیلی	emily@example.com	30
جارا	jara@example.com	25
کلارک	clark@example.com	39
جنیفر	jennifer@example.com	52
تونی	tony@example.com	30
تام	tom@example.com	25
مایکل	michael@example.com	39
آنتونی	antony@example.com	39
ریموند	raymond@example.com	52
ماری	marie@example.com	30
کوهن	cohen@example.com	25
روون	rowen@example.com	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 برای فعال کردن صفحه بندی اعداد، کلاس اضافه کنید. ساختار زیر صفحه بندی اعداد را با دکمه بعدی و قبلی فعال می کند.

نام	پست الکترونیک	سن
آنا	anna@example.com	18
هومر	homer@example.com	35
اسکار	oscar@example.com	52
امیلی	emily@example.com	30
جارا	jara@example.com	25
کلارک	clark@example.com	39
جنیفر	jennifer@example.com	52
تونی	tony@example.com	30
تام	tom@example.com	25
مایکل	michael@example.com	39
آنتونی	antony@example.com	39
ریموند	raymond@example.com	52
ماری	marie@example.com	30
کوهن	cohen@example.com	25
روون	rowen@example.com	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>

اسناد

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

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

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

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

جاوا اسکریپت

<script src="vendors/list.js/list.min.js"></script>

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

مثال جدول

صفحه بندی با شماره گذاری

اسناد

جاوا اسکریپت

تنظیمات

طرح رنگ بندی

RTL حالت

چیدمان سیال

موقعیت ناوبری

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

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

آیفون

فالکون نسخه 1.8.2

آنا کارینینا

آنتونی هاپکینز

اما واتسون

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

مثال جدول

صفحه بندی با شماره گذاری

اسناد

جاوا اسکریپت

تنظیمات

طرح رنگ بندی

RTL حالت

چیدمان سیال

موقعیت ناوبری

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

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