Maison > développement back-end > tutoriel php > Comment utiliser ThinkPHP pour intégrer des tables de données afin d'implémenter la pagination côté serveur

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

不言
Libérer: 2023-03-31 10:16:01
original
1819 Les gens l'ont consulté

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
   }
  ]
});
Copier après la connexion

2. Côté serveur :

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

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

1) Code du contrôleur :

public function index()
{
 if(IS_AJAX){
  $list = D(&#39;Msg&#39;)->getData(I(&#39;get.&#39;));
  $this->ajaxReturn($list);
 }
 $this->display();
}
Copier après la connexion

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

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

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

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;">
Copier après la connexion

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(&#39;Msg/index&#39;)}",
  "data":function(d){ //额外传递的参数
   d.mintime = $(&#39;#logmin&#39;).val();
   d.maxtime = $(&#39;#logmax&#39;).val();
  }
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal