КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

jQuery плагин DataTables

Респект всем, кто встал на этот нелегкий путь, всем, кто не может спокойно спать, зная что в коде висит неисправленная ошибка. Всем, кто тыщу раз сказал "почему не хочет?!". Всем кто всё-таки допёр почему. Всем на форумах и чатах. Всем друзьям.

Недавно один замечтательный человек слёзно попросил меня хомячка сделать в CRM системе переписку между пользователями. И как раз так совпало, что буквально день назад я услышал за DataTables и решил применить его для этой цели, так как требовалось три поля - от кого, само сообщение и дата.
Итак, нам нужны будут Материалы, в архиве всё что нужно для использования и настройки плагина.
Подключаем нужные файлы, будем использовать бутсраповскую стилизацию
<!-- В head -->
<link href="tasksModule/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="tasksModule/css/dataTables.bootstrap.css"/>

<!-- Перед </body> для того, чтобы не смотреть на пустую белую тишину до того, как будут выполнен весь js код -->
 <script src="tasksModule/js/jquery-1.11.3.min.js"></script>   
<script src="tasksModule/js/bootstrap.min.js"></script>
<script type="text/javascript" src="tasksModule/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="tasksModule/js/dataTables.bootstrap.js"></script>    
<script src="tasksModule/js/jquery-ui.min.js"></script>
<script src="tasksModule/js/script.js"></script>

Итак, самое сложное взади, ерунда писать код когда выходная точка - чистая девственная консоль. HTML код таблицы и вывод из бд пользователей кроме текущего:
<div class="dataTables_wrapper" style="float: left;width: 79%;">

  <table id="tasks" cellspacing="0"  border="0 solid black" style="width: 100%;">
      
    <thead>        
      <tr>
        <th class="sorting" style="width: 22%;">От кого</th>
        <th style="">Сообщение</th>    
        <th class="sorting" style="width: 22%;">Отправлено</th>
      </tr>            
    </thead>

    <tbody>        
      <!-- сюда будут приходить данные аякса -->
    </tbody>
      
  </table>
</div>

<div id="tasksUsers" style="display: inline-block; margin-left:1%; padding: 11px; border: 1px solid #073205; box-sizing: border-box;">

  <?php

    $db = DB::getInstance();
    $query = "SELECT `s_name`, `s_id` from `staff` WHERE `s_id`!=" . $_SESSION['id'];
    $res = $db->prepare($query);
    $res->execute();
    while($row = $res->fetch()){
       
      $splitName = explode(' ', $row['s_name']);

      echo "<div class='tasksUsers' id='" .$row['s_id']. "user'><img src='/tasksModule/img/2.png' style='display:block; float: left; margin: 5px 7px 0 0;'> " . $splitName[0] . "<br> " . $splitName[1] . "</div>" ;
    } 
  ?>
</div>

Далее,инициализируем нашу табличку и все аякс-запросы ставим на морду сайта в json-формате:
var table = initTasksTable(),
  body = $('body'),
  obj, task_to, task_from, task_txt, countTasks, countMessText, count,
  user, id, preliminary, update, dataArr;
  
$.ajaxSetup({
  url : '/',
  type: 'POST',
  dataType : 'json',
  error : function(err){
    //console.log(err);
  }
});

function initTasksTable(){
  var table = $('#tasks').DataTable({
    // русифицируем DataTables
    "oLanguage":{
      "sLengthMenu": "Отображено _MENU_ сообщений на страницу",
      "sSearch": "Поиск:",
      "sZeroRecords": "Ничего не найдено - извините",
      "sInfo": "Показано с _START_ по _END_ из _TOTAL_ сообщений",
      "sInfoEmpty": "Ничего не найдено",
      "sInfoFiltered": "",
      "oPaginate": {
      "sFirst": "Первая",
      "sLast":"Посл.",
      "sNext":"След.",
      "sPrevious":"Пред."      
      }
    }
  });
  return table;
}

Для вывода данных у меня написан статический класс DB, подключаем его в индекс.похапе и принимаем решение, какую функцию использовать для обработки данных из js аякса:
header('Content-type:text/html; charset=utf8');
session_start();
$_SESSION['id'] = 1;
ini_set('display_errors', '1');
error_reporting(E_ALL & ~E_NOTICE & ~E_STRICT & ~E_DEPRECATED); 
define('_BASE_PATH', __DIR__.DIRECTORY_SEPARATOR );
mb_internal_encoding('UTF-8');

function autoload($class){
  require_once _BASE_PATH . "tasksModule/classes/$class.php";
}
spl_autoload_register('autoload');

if(isset($_POST['ajaxFunction'])){
  $ajaxFunction = $_POST['ajaxFunction'];
  echo DB::$ajaxFunction($_POST);
  exit;
}


Дополняем js-файл конечной функцией, которая примет на себя заботу об том, дабы разобрать полученный джейсОн и вставить строки в таблицу. Тут самое интересное
function getTasksByUserID(userID){

  table.clear(); // очищаем таблицу
  
  $.ajax({
    
    data : {ajaxFunction : 'getTasksByUserID', userID : userID},

    success : function(response){
    
      for(n in response){ // разбираем пришедший обьект        
        table.row.add([ // добавляем строки в таблицу 
          response[n].s_name,
          response[n].task_txt,
          response[n].task_dstart + "<span style='display:none;'>"  +  response[n].task_stat  +  ","  + response[n].task_from + "</span>" // в скрытый спан положим некоторые данные о сообщении (от кого пришло и было ли оно прочитано)
          
        ]);            
      }

      table.order( [ 2, 'dsc' ] ).draw(false); // сортируем по колонке даты и перерисовываем таблицу

     // redColorRow();  // вспомогательная функция для подсветки непрочитанных сообщений, пишем самостоятельно.. 

      return userID; // возвратим айдишник человека, с которым мы открыли переписку

    }
  });
}

Всё что нам осталось, это повесить на аватарки пользователей обработчик клика
body.on('click', '.tasksUsers', function(){

  userID = parseInt($(this).attr('id'));
  var user = $(this).text();
  getTasksByUserID(userID);

});
В общем, кто зашел на мой сайтик, вам повезло. Делюсь
2015.11.11 298
jpg

Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


    Яндекс.Метрика Яндекс.Метрика