» » DataTables: отримуємо дані за допомогою Ajax, і редагуємо їх прямо на місці

DataTables: отримуємо дані за допомогою Ajax, і редагуємо їх прямо на місці

Досить часто, коли справа доходить до табличних даних, і виникає необхідність вивести їх на екран в зручній формі з додатковими комірками і властивостями, багатьом серйозно слід задуматися про те, яким чином краще реалізувати це. Серед найнеобхідніших функцій можна відзначити: отримання даних за допомогою Ajax, навігація по сторінках (пагінація), сортування даних по полях, пошук і фільтр. Чим більше буде бажаних функцій і властивостей, тим складнішою буде система. Звичайно ж, ми можемо почати реалізацію необхідних функцій по черзі і в міру необхідності. Вочевидь, що реалізація системи подібної складності займе досить багато часу, проте завжди слід пам'ятати про те, що зовсім не обов'язково заново «винаходити колесо».
DataTables: отримуємо дані за допомогою Ajax, і редагуємо їх прямо на місці


Щоб не винаходити нічого нового, ми хочемо порекомендувати вам розглянути варіант з готовим jQuery-плагіном DataTables. Раніше ми вже розповідали вам про цей плагін, але до подробиць не вдавалися. DataTables вже вирішив безліч таких проблем, як робота з AJAX, пагінація, пошук і сортування. Проте цей плагін не надає можливості редагувати дані. Така необхідність, наприклад, може виникнути при розробці сторінки для адмін-панелі для вашого веб-сайту. Це може стати ідеальним рішенням при роботі із списком учасників сайту. Більш того, можливість редагування прямо на місці (з валідацією) - це якраз те, що потрібне багатьом.

На щастя, ця можливість є, і сьогодні ми хочемо розповісти вам про способи реалізації. Ми візьмемо ще декілька додаткових бібліотек: dataTables.editable, Jeditable + плагін jQuery Validation. Тепер нам потрібно все це з'єднати.

HTML-код

Спершу потрібно створити html-таблицю, в яку ми завантажуватимемо дані. А також не забудьте включити всі необхідні JS-бібліотеки і CSS-файли.

Index.htm
 <link href="css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
  <link href="css/styles.css" rel="stylesheet" type="text/css" />

  <div class="table">
      <h2>'pd_profiles' table</h2>
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="pd_profiles" style="width:95%;margin:0 auto" width="100%">
          <thead><th title="First Name">first_name</th><th title="Last Name">last_name</th><th title="Email">email</th><th title="Status">status</th><th title="Role">role</th><th title="Registration date">date_reg</th></thead>
          <tbody><tr><td colspan="6" class="dataTables_empty">Downloading data about the users from the server</td></tr></tbody>
          <tfoot><th title="First Name">first_name</th><th title="Last Name">last_name</th><th title="Email">email</th><th title="Status">status</th><th title="Role">role</th><th title="Registration date">date_reg</th></tfoot>
      </table>
      <div style="clear:both"></div><br /><hr />
      <button id="btnDeleteMemRow">Delete record</button>
  </div>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/jquery.dataTables.editable.js"></script>
<script src="js/jquery.jeditable.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/main.js"></script>


Для нашого демо (і нашого прикладу) ми візьмемо одну з існуючих таблиць (MYSQL) - “pd_profiles”. Всі необхідні для відображення поля визначені в шапці таблиці.

javascript-код

Тепер давайте звернемося до нашої HTML-таблиці в DataTable, і зробимо так, щоб її можна було редагувати.

Inc/main.js
$(function() {

  var oMemTable = $('#pd_profiles').dataTable({
      'bProcessing': true, 'bServerSide': true, 'sAjaxSource': 'service.php?action=getMembersAjx',
    }).makeEditable({
    sUpdateURL: 'service.php?action=updateMemberAjx',
    'aoColumns': [
        {
            tooltip: 'First Name',
            oValidationOptions : { rules:{ value: {minlength: 3 }  },
            messages: { value: {minlength: 'Min length - 3'} } }
        },
        {
            tooltip: 'Last Name',
            oValidationOptions : { rules:{ value: {minlength: 3 }  },
            messages: { value: {minlength: 'Min length - 3'} } }
        },
        {
            tooltip: 'Email',
            oValidationOptions : { rules:{ value: {minlength: 5 }  },
            messages: { value: {minlength: 'Min length - 5'} } }
        },
        {
            tooltip: 'Member status',
            type: 'select',
            data: "{'passive':'passive','active':'active'}",
            submit: 'Ok',
        },
        {
            tooltip: 'Member role',
        },
        {
            tooltip: 'date_reg',
            oValidationOptions : { rules:{ value: {minlength: 3 }  },
            messages: { value: {minlength: 'Min length - 3'} } }
        }
    ],
    sDeleteURL: 'service.php?action=deleteMember',
    sDeleteRowButtonId: 'btnDeleteMemRow',
  });

});

В процесі ініціалізації ми визначаємо дані, які будуть взяті з сервера за допомогою Ajax, а потім робимо таблицю редагованою, після того, як ми вказуємо адресу для оновлення значень полів. В самому кінці, ми вказуємо ID кнопки “Delete”, а також URL для відправки даних.


PHP-код

Як ви вже напевно помітили, всі AJAX-запити працюють з файлом service.php. Це спеціальний сервісний файл, який працює як веб-сервіс (який обробляє Ajax-запити).

Service.php
if ($_GET) {
    require_once('classes/CMySQL.php');
    switch ($_GET['action']) {
        case 'getMembersAjx':
            getMembersAjx();
            break;
        case 'updateMemberAjx':
            updateMemberAjx();
            break;
        case 'deleteMember':
            deleteMember();
            break;
    }
    exit;
}

function getMembersAjx() {

    // SQL limit
    $sLimit = '';
    if (isset($_GET['iDisplayStart']) && $_GET['iDisplayLength'] != '-1') {
        $sLimit = 'LIMIT ' . (int)$_GET['iDisplayStart'] . ', ' . (int)$_GET['iDisplayLength'];
    }

    // SQL order
    $aColumns = array('first_name', 'last_name', 'email', 'status', 'role', 'date_reg');
    $sOrder = '';
    if (isset($_GET['iSortCol_0'])) {
        $sOrder = 'ORDER BY  ';
        for ($i=0 ; $i<(int)$_GET['iSortingCols'] ; $i++) {
            if ( $_GET[ 'bSortable_'.(int)$_GET['iSortCol_'.$i] ] == 'true' ) {
                $sOrder .= '`'.$aColumns[ (int)$_GET['iSortCol_'.$i] ].'` '.
                    ($_GET['sSortDir_'.$i]==='asc' ? 'asc' : 'desc') .', ';
            }
        }

        $sOrder = substr_replace($sOrder, '', -2);
        if ($sOrder == 'ORDER BY') {
            $sOrder = '';
        }
    }

    // SQL where
    $sWhere = 'WHERE 1';
    if (isset($_GET['sSearch']) && $_GET['sSearch'] != '') {
        $sWhere = 'WHERE 1 AND (';
        for ($i=0; $i<count($aColumns) ; $i++) {
            if (isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == 'true') {
                $sWhere .= '`' . $aColumns[$i]."` LIKE '%".mysql_real_escape_string($_GET['sSearch'])."%' OR ";
            }
        }
        $sWhere = substr_replace( $sWhere, '', -3 );
        $sWhere .= ')';
    }

    $aMembers = $GLOBALS['MySQL']->getAll("SELECT * FROM `pd_profiles` {$sWhere} {$sOrder} {$sLimit}");
    $iCnt = (int)$GLOBALS['MySQL']->getOne("SELECT COUNT(`id`) AS 'Cnt' FROM `pd_profiles` WHERE 1");

    $output = array(
        'sEcho' => intval($_GET['sEcho']),
        'iTotalRecords' => count($aMembers),
        'iTotalDisplayRecords' => $iCnt,
        'aaData' => array()
    );
    foreach ($aMembers as $iID => $aInfo) {
        $aItem = array(
            $aInfo['first_name'], $aInfo['last_name'], $aInfo['email'], $aInfo['status'], $aInfo['role'], $aInfo['date_reg'], 'DT_RowId' => $aInfo['id']
        );
        $output['aaData'][] = $aItem;
    }
    echo json_encode($output);
}
function updateMemberAjx() {
    $sVal = $GLOBALS['MySQL']->escape($_POST['value']);

    $iId = (int)$_POST['id'];
    if ($iId && $sVal !== FALSE) {
        switch ($_POST['columnName']) {
            case 'first_name':
                $GLOBALS['MySQL']->res("UPDATE `pd_profiles` SET `first_name`='{$sVal}' WHERE `id`='{$iId}'");
                break;
            case 'last_name':
                $GLOBALS['MySQL']->res("UPDATE `pd_profiles` SET `last_name`='{$sVal}' WHERE `id`='{$iId}'");
                break;
            case 'email':
                $GLOBALS['MySQL']->res("UPDATE `pd_profiles` SET `email`='{$sVal}' WHERE `id`='{$iId}'");
                break;
            case 'status':
                $GLOBALS['MySQL']->res("UPDATE `pd_profiles` SET `status`='{$sVal}' WHERE `id`='{$iId}'");
                break;
            case 'role':
                $GLOBALS['MySQL']->res("UPDATE `pd_profiles` SET `role`='{$sVal}' WHERE `id`='{$iId}'");
                break;
            case 'date_reg':
                $GLOBALS['MySQL']->res("UPDATE `pd_profiles` SET `date_reg`='{$sVal}' WHERE `id`='{$iId}'");
                break;
        }
        echo 'Successfully saved';
    }
    exit;
}
function deleteMember() {
    $iId = (int)$_POST['id'];
    if ($iId) {
        $GLOBALS['MySQL']->res("DELETE FROM `pd_profiles` WHERE `id`='{$iId}'");
        return;
    }
    echo 'Error';exit;
}

Нашій таблиці потрібно лише три функції: для отримання списку користувачів (getMembersAjx - ця функція також пропонує сортування, пагінацію і пошук), оновлення записів в mysql-таблиці (updateMemberAjx), а також видалення записів (deleteMember).

CSS-код

Для коректного відображення DataTable, ми прикріплюємо файл jquery.dataTables.css. Проте тут є один незначний недолік - у нас немає можливості підсвічувати виділені рядки таблиці. Але ми виправили ситуацію за допомогою додаткових стилів:

Css/styles.css
.table {
    margin: 50px auto;
    width: 90%;
}
table.display tr.even.row_selected td {
    background-color: #B0BED9;
}
table.display tr.odd.row_selected td {
    background-color: #9FAFD1;
}


На завершення

Сподіваємося, що сьогоднішній урок піде вам на користь, і ви зможете використовувати цей приклад на практиці у ваших майбутніх проектах. Мабуть, це ідеальне рішення, яке допоможе вам отримати повноцінну таблицю з даними.

PS: ви напевно помітили, що в нашому онлайн-демо ми відключили можливість редагування даних (а також видалення). Це потрібно тому, що ця таблиця використовується в нашому іншому уроці. На даний момент таблицю можна лише читати.


2819 21.04.14



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру