چگونه با دیتاتیبل جدول و لیست اطلاعات بسازیم؟ همانطور که می‌دانید jQuery مهم‌ترین کتابخانه جاوا اسکریپت است که تقریباً همه وب سایت‌های کنونی از آن استفاده می کنند. یکی از پلاگین های قدرتمند کتابخانه jQuery برای ساخت جدول ها و لیست ها DataTables است. این پلاگین به این شکل نیست که فقط از داده‌هایی که در اختیارش قرار می‌گیرد یک جدول ساده رسم کند. جدولی که توسط datatables رسم می‌شود قابلیت ارتباط با کاربر را دارد که کاربر می‌تواند در جدول اعمالی مانند جستجو و مرتب سازی و صفحه بندی را به راحتی انجام دهد. در این مطلب ما در مورد نحوه استفاده از این پلاگین صحبت می کنیم.

نصب DataTables

برای اینکه از این پلاگین استفاده کنیم باید قبل از هر چیز فایل‌های آن را به پروژه اضافه کنیم. فایل‌های این پلاگین را می‌توانید از این آدرس دانلود کرده و به پروژه خود اضافه کنید و اگر می‌خواهید از آدرس CDN استفاده کنید و فایل‌ها را دانلود نکنید از این آدرس استفاده نمایید. سعی کنید که آخرین نسخه از فایل‌ها را استفاده کنید.

شروع کار با DataTables

برای کار با DataTables داده‌ها را می‌توان از منابع مختلفی فراخوانی کرد. این پلاگین حتی می‌تواند از داده‌هایی که در یک جدول html وجود دارد استفاده کند و یا می‌تواند که داده‌ها را از یک سرور توسط ajax خوانده و برروی آن‌ها اعمال شود. اولین مثالی که زده ایم به این شکل است که داده‌ها در html به صورت hard Code وجود دارد و DataTables را بر روی آن‌ها اعمال کرده‌ایم:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data tables</title>
    <link rel="stylesheet" href="lib/datatables.css">
</head>
<body>
<table id="example">
    <thead>
    <tr>
        <th>Programming Languages</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Java</td>
    </tr>
    <tr>
        <td>Python</td>
    </tr>
    <tr>
        <td>C++</td>
    </tr>
    </tbody>
</table>
<script src="lib/jQuery-3.3.1/jquery-3.3.1.js"></script>
<script src="lib/datatables.js"></script>
<script>
    $(document).ready(function () {
        $('#example').dataTable()
    })
</script>
</body>
</html>

حال اگر این صفحه را با مرورگر خود باز کنید نتیجه استفاده از DataTables را می‌بینید که جدول شما ساخته شده است و همچنین صفحه بندی شده و قابلیت جستجو دارد و همچنین اگر روی سرستون کلیک کنید می‌بینید که به صورت صعودی و نزولی همه سطر ها مرتب سازی می شوند. دقت کنید که برای پیاده‌سازی این قابلیت‌ها لازم بود کلی کد جاوااسکریپت بنویسیم که با استفاده از DataTables دیگر لازم نیست. دقت کنید که در کد بالا کتابخانه‌های jQuery, DataTables در پوشه ای با نام lib قرار دارد که در مسیر صفحه می باشد.

همچنین برای اینکه DataTables به درستی روی جدول شما کار کند باید دقت داشته باشید که از همه عناصر یک جدول استفاده کنید یعنی تگ table, thead,tr, th, tbody, tr, td. به عبارت دیگر باید ساختار جدول از نظر thead, tbody رعایت شده باشد. تنها کد جاوا اسکریپت که در کد بالا استفاده شده است کد dataTables است که برای جدول مورد نظر فراخوانی شده است.حال می‌توان هر کدام از امکانات dataTables را فعال و غیر فعال کرد برای برای این کار باید داده‌ها را به صورت آرگومان ورودی به تابع dataTables وارد کنیم برای مثال کد زیر باعث می‌شود که عمل مرتب سازی و صفحه بندی و اطلاعات غیر فعال شود.

$(document).ready(function() {
$('#example').DataTable( {
"paging": false,
"ordering": false,
"info": false
} );
} );

خواندن داده‌ها از سرور

برای اینکه داده‌ها را از سمت سرور بخوانیم باید آن‌ها را در قالب فایل json و با استفاده از ajax لود کرده و در دیتاتیبل نمایش دهیم. برای این کار تنظیمات dataTables باید به شکل زیر باشد. البته در این مثال کد ajax آورده نشده است و داده‌ها از قبل به صورت json نشان داده شده اند.برای این کار جدول را به صورت زیر در آورده‌ایم

<table id="example" >
    <thead>
    <tr>
        <th>نام</th>
        <th>نوع</th>
        <th>شی گرایی</th>
        <th>سروری بودن یا کلاینتی</th>
        <th>استاندارد بودن</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

و داده‌ها را داخل یک فایل به نام data.json به صورت زیر که یک فایل json است ذخیره کرده ایم.

{
  "data": [
    [
      "c++",
      "system",
      "object oriented",
      "server side",
      "1989"
    ],
    [
      "c#",
      "system",
      "object oriented",
      "server side",
      "2000"
    ],
    [
      "f#",
      "system",
      "functional",
      "server side",
      "no"
    ],
    [
      "go",
      "system",
      "not object oriented",
      "server side",
      "standard"
    ],
    [
      "java",
      "system",
      "object oriented",
      "server side",
      "standard"
    ],
    [
      "javascript",
      "script",
      "object oriented",
      "web client and server side",
      "1997"
    ],
    [
      "python",
      "script",
      "object oriented",
      "server side",
      "standard"
    ]
  ]
}

و در نهایت برای فراخوانی dataTables کد زیر را نوشته ایم.

$(document).ready(function () {
    $('#example').dataTable({
       "ajax":"data.json.txt"
    })
})

حال شما می‌توانید به جای آدرس فایل، url مربوط به سرور را قرار دهید تا اطلاعات از سمت سرور خوانده شوند.

قالب بندی دیتاتیبل

اگر شما از کتابخانه‌های معروفی مانند bootstrap و یا semantic ui برای قالب بندی صفحات خود استفاده می‌کنید نگران این نباشید که Datatables یک تافته جدا بافته از سایت شما باشد. این پلاگین به خوبی با این کتابخانه‌ها کار می‌کند و قالب‌های آن را به خود می‌گیرد. برای توضیحات بیشتر به وب سایت این پلاگین مراجعه کنید.با وب سایت tosinso همراه باشید.