Comment utiliser ThinkPHP pour intégrer des tables de données afin d'implémenter la pagination côté serveur

Ce qui suit est un exemple de code permettant à ThinkPHP d'intégrer des tables de données pour implémenter la pagination côté serveur. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Il est nécessaire de faire quelque chose récemment, car la quantité de données est très importante. Ici, j'ai décidé d'utiliser la pagination des tables de données côté serveur, et je dois également transmettre les conditions de requête au serveur. La plupart des articles recherchés sur Internet ont senti qu'il y avait des erreurs, je les ai donc emballés moi-même. La configuration/les principaux outils sont :

Serveur : php (en utilisant thinkphp)

Le style de la page. vient du framework H- ui (la version des tables de données est 1.10.0)

Les principaux éléments de configuration modifiés (bases de données) sont :

1) bProcessing:true utilisant ajax Source

2) serverSide:true Utiliser la pagination côté serveur

3) CreateRow:function(){} fonction de rappel pour ajouter un événement ou un nom de classe

4) aoColumns Utilisé pour traiter et afficher les données, dans lesquelles l'attribut de rendu est utilisé pour les colonnes personnalisées

1 Le code js des tables de données est :

$('.table-sort').dataTable({
 processing: true,
  serverSide: true,
  ajax: {
   "url":"{:U('Msg/index')}",
   "data":function(d){ //额外传递的参数
    d.mintime = $('#logmin').val();
    d.maxtime = $('#logmax').val();
   }
  },
  bStateSave: true,//状态保存
  aLengthMenu : [20, 30, 50, 100, 150],
  bProcessing : true,
  bAutoWidth: false,
  bFilter : true, //是否启动过滤、搜索功能
  bInfo : true, //是否显示页脚信息，DataTables插件左下角显示记录数 
  createdRow: function ( row, data, index ) {
   $(row).addClass('text-c');
   $('#count').html(data.recordsFiltered);
  },
  aoColumns: [
   {
    "sClass": "text-center",
    "data": "id",
    "render": function (data, type, full, meta) {
     return &#39;<input type="checkbox" name="select" value="&#39; + data + &#39;" />&#39;;
    },
    "bSortable": false
   },
   { "mData": "id" },
   { "mData": "fromnickname"},
   { "mData": "content" },
   { "mData": "msgtype" },
   { "mData": "time"},
   {
    "sClass": "text-center",
    "data": "id",
    "render": function (data, type, full, meta) {
     html = &#39;<a title="查看" href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="show(`查看`,`__URL__/show/id/&#39;+ data + &#39;`,``,`610`)" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">查看</i></a>&#39;;
     html += &#39;<a style="text-decoration:none" class="ml-5" onClick="signDel(this,&#39;+ data +&#39;)" href="javascript:;" rel="external nofollow" rel="external nofollow" title="删除"><i class="Hui-iconfont"></i>删除</a>&#39;;
     return html;
    },
    "bSortable": false
   }
  ]
});

2. Côté serveur :

控制器:
接收参数如下:
draw    前端传过来的值,原值返回,用于验证
mintime、maxtime 自定义参数(时间)
search.value  datatables搜索框参数,用于查询筛选
order.0.column  要排序的单元格(从0开始,字段需要自己设置)
order.0.dir   排序(升序、降序)
start    起始条数(第几条开始)
length    查询长度
返回的数据如下:
draw    返回前端传过来的值
recordsTotal  记录总条数
recordsFiltered  条件筛选后的记录总条数
data    服务端查询的数据
返回数据形式:json

3. Le code complet du backend du serveur est le suivant :

1) Code du contrôleur :

public function index()
{
 if(IS_AJAX){
  $list = D('Msg')->getData(I('get.'));
  $this->ajaxReturn($list);
 }
 $this->display();
}

2) Code de couche modèle : (*parmi eux, la méthode dealTime est principalement utilisée pour traiter les périodes)

public function getData($data)
{
 //获取Datatables发送的参数 必要
 $draw = $data['draw']; //这个值直接返回给前台
 //获取时间区间
 $timeArr['mintime'] = $data['mintime'];
 $timeArr['maxtime'] = $data['maxtime'];
 $where = $this->dealTime($timeArr);
 //搜索框
 $search = trim($data['search']['value']); //获取前台传过来的过滤条件 
 if(strlen($search) > 0) {
  $where['id|fromnickname|content|msgtype'] = array('like','%'.$search.'%');
 }
 //定义查询数据总记录数sql
 $recordsTotal = $this->count();
 //定义过滤条件查询过滤后的记录数sql
 $recordsFiltered = $this->where($where)->count();
 //排序条件
 $orderArr = [1=>'id', 2=>'fromnickname', 3=>'content', 4=>'msgtype', 5=>'time'];
 //获取要排序的字段
 $orderField = (empty($orderArr[$data['order']['0']['column']])) ? 'id' : $orderArr[$data['order']['0']['column']];
 //需要空格,防止字符串连接在一块
 $order = $orderField.' '.$data['order']['0']['dir'];
 //按条件过滤找出记录
 $result = [];
 //备注:$data['start']起始条数 $data['length']查询长度
 $result = $this->field('id,fromnickname,content,msgtype,time')
     ->where($where)
     ->order($order)
     ->limit(intval($data['start']), intval($data['length']))
     ->select();
 //处理数据
 if(!empty($result)) {
  foreach ($result as $key => $value) {
   $result[$key]['time'] = date("Y-m-d H:i:s",$value['time']);
   $result[$key]['recordsFiltered'] = $recordsFiltered;
  }
 }
 //拼接要返回的数据
 $list = array(
  "draw" => intval($draw),
  "recordsTotal" => intval($recordsTotal),
  "recordsFiltered"=>intval($recordsFiltered),
  "data" => $result,
 );
 return $list;
}

3) Implémenter la recherche ajax auto-définie

1. 在WdatePicker中添加onpicked回调函数
2. 执行table.fnFilter(),其中table为datatables对象

Prenons l'exemple du plug-in WdatePicker (la zone de saisie est similaire, liez simplement l'événement onchange) :

<input type="text" onfocus="WdatePicker({maxDate:&#39;#F{ $dp.$D(\&#39;logmax\&#39;)||\&#39;%y-%M-%d\&#39;}&#39;, onpicked:function(){table.fnFilter();}})" name="mintime" id="logmin" class="input-text Wdate" style="width:120px;">

3 L'attribut data dans l'attribut ajax dans les tables de données définit des paramètres supplémentaires à transmettre

.

Exemple :

ajax: {
  "url":"{:U('Msg/index')}",
  "data":function(d){ //额外传递的参数
   d.mintime = $('#logmin').val();
   d.maxtime = $('#logmax').val();
  }

4) Capture d'écran du code :

une page html

partie b.js

Ce qui précède est l'intégralité du contenu de cet article, je l'espère. sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse de la façon dont thinkPHP5 implémente la fonction de pagination

Analyse de la façon dont ThinkPHP implémente la mise en cache statique et la mise en cache dynamique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!