简单的CI+PHPstudy+bootstrap-table的分页和查询
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了简单的CI+PHPstudy+bootstrap-table的分页和查询，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11785字，纯文字阅读大概需要17分钟。
内容图文
幼稚园水平的我终于用标题的这些东西整出了分页和查询，虽然在大神眼里，这都不算啥，我也只是想记录一下这过程以及我自己的理解。
1、概念：
CI框架：这。。。百度可能讲得更好些。我自己的感觉就是，这个框架不难，然后是轻量级的框架，主要是依靠控制器和视图，在这里面反复横跳。很像MVC框架，但是没有模型(model)。
然后这个框架只有一个入口，过程大概就是：客户端——>入口文件——>指定控制器里面的方法——>跳转到视图(页面)——>其他操作。
这个框架，很多文章都会提到一个叫路由(routes)的东西，以及五个钩子(hooks)，钩子我不知道怎么用，但是这里面的路由，在用的时候其实就是指定一个入口控制器，也就是指定唯一的入口。所以这个路由，我自以为这就是一个记录入口控制器的文件。
bootstrap-table：这是一个前端用的很多的一个框架。em…就是一个样式很丰富，功能比较齐全的框架，这里面的参数挺多的，开始用的时候都是看着手册照着打的。然后里面的功能，就比如说分页这种，功能是封装好的，我们用的时候就在后台返回它需要的参数就可以。
然后这个框架毕竟是前端，所以和数据库交互的一些代码还要自己再琢磨一下。反正我开始不知道那些功能封装好，然后给它自定义了参数。然而并没什么用。就传参就好啦。不用写太多功能和定义之类的。简单粗暴吧。
phpstudy就没什么好说了，一键安装。O啦。
P.S.：这些是我下载的一些地址，有需要看看也行。
CI框架：手册：https://codeigniter.org.cn 下载：https://codeigniter.org.cn/download （我下载啦红色的第一个）
bootstrap：https://v3.bootcss.com/ （这里面下载的和下面的不一样，都要下载）
bootstrap-table：https://bootstrap-table.com/ （这里面的Examples就是很多参数的例子！）
2、实操：
（1）环境：phpstudy没什么好配置的，确保端口之类的没错就行。然后就是CI，把下载的文件解压之后放在WWW下面就好了。
在浏览器中尝试打开：localhost/ci2——————>这个ci2是我的ci框架文件名。成功打开的图片如下：
（2）CI里面的设置：主要设置是ci2/application/databse.php (就是配置连接数据库的登录名和密码) 以及ci2/application/routes.php (配置入口文件)
（还有一个database一定要记得写，就是你的数据库！）
（3）新建控制器。（这里有个很重要的知识点！！！这个控制器的创建一定要首字母大写，然后类！一定也要大写！类一定要继承CI_Controller，但是上面的那个图，入口文件里面写的控制器是小写的！）对啦。这个控制器里面的视图访问：$this->load->views('视图名字')。这里也有个重点！就是视图名字不加后缀的！
还有就是，控制器一般都有一个默认函数——>index()，这个函数就指向一个默认的视图或者别的东西（当然都是自己写的。。。框架没有自动生成这些）
（4）然后是视图，视图就是HTML，就前端代码随便写写，但是要写一点东西。因为需要打开网页去看是否成功。
（5）准备得差不多就浏览器试试：localhost/ci2—————>因为前面的入口文件已经设置过了是自己建的控制器了。所以要试试看成不成。没有报错404就行。（这几个问号是我自己写来测试而已。。。）
（6）可以访问的话，我们就可以在视图里面（也就是页面）结合bootstrap-table整个分页。
①前端分页：虽然说是前端分页，但是数据还是需要从后端传出来的。区别后面说。
还有一点要准备得东西
a.把上面下载的样式的放在一个新建的文件夹里，然后页面里记得引入，还有一个jq的。（jq的那个我用了网址：https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js）jq网址访问会慢一点。
b.新建一个控制器，用来记录方法的，我这边新建了一个叫做function.php的控制器。等等上图。
（c.在视图里面加一行 <?php $this->load->helper('url');?> ————>这个是因为页面需要跳转，我用了比较low的方法，所以要用到这个。
如果不想麻烦的话，可以在原来的shouye.php的页面里做一个构造函数，把这个写里面。。。或者大神们有别的方法可以评论告诉我。。。。）
【补充：菜鸡的我表达错了，这个load->view()实际上是加载而不是跳转，跳转的话是使用redirect('跳转链接')】
data-toggle="table" //bootstrap-table里的样式
data-url="<?php echo base_url('function.php/index');?>" //调用数据库数据
data-pagination="true" //分页必备
data-side-pagination="client //client是前端分页，server是后端分页
这些是前端必备的参数，完整的代码如下：
（data-field的参数是你数据库里面对应的字段名）
（如果直接使用这一堆！你要记得修改：data-url的链接，这个是链接到后端进行查找数据用的，记得是'文件名/方法名'
data-field的值，这个是你数据库中，这个数据的字段名）
（里面存放样式的文件夹，是我自己在application下面建的。路径记得写对啊。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="style/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="style/css/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="style/css/bootstrap.css">
<script type="text/javascript" src="style/js/bootstrap-table.min.js"></script>
<?php $this->load->helper('url');?>
<!-- 记得引入这一堆东西 -->
</head>
<body>
<table id="table"
data-toggle="table"
data-url="<?php echo base_url('function.php/index');?>"
data-pagination="true"
data-side-pagination="client">
<thead>
<tr>
<th data-field="u_id">ID</th>
<th data-field="u_name">用户名</th>
<th data-field="u_tel">电话</th>
</tr>
</thead>
</table>
</body>
</html>
我补充一点分页的原理啊，就是分页这东西，你使用bootstrap-table这个框架之后，它能自动帮你分页！就很方便！但是你需要给它点数据。
同时它也会告诉你分页是怎样分，就是要每页几条数据(limit)，第一条数据开始的下标(offset)这种。这是前段会传给后端的数据。
然后后端需要接受这两个数据，用来查询并输出结果，要返回两个参数，一个是总共有几条数据(total),另一个是数据(row)。
这个变量名不是自己定的哈。在那个官方手册里面，F12然后看网络里面有实例的返回内容，里面有参数的名称。如下图：
在浏览器的响应里面可以看到它需要的数据是json数据格式。里面就是后端查询到的全部数据，然后返回给前端。它自己会给你编排好的。
有没有小伙伴好奇这为什么没有返回total，因为这个例子没有写。。。。
(如果不知道json格式的。拖到文末。看我瞎逼逼一下。)
控制器：主要是把数据从数据库中取出来，然后筛选再传回去给前端页面。
首先需要获取前端传过来的offset和limit的值，然后查询，最后返回。
因为是json数据，所以最后是以json_encond返回的。
这个语法。。。有太多写法了，小菜鸡有小菜鸡的写法！
（如果你要直接用我这堆东西，你要记得修改：count_all('表名')，get('表名')）
<?php
class function extends CI_Controller{
public function index(){
$this->load->database();
// $arr = $this->db->get('user')->result(); //获取数据库表信息
$limit = $this->input->get('limit'); //前端传的数据
$offset = $this->input->get('offset'); //这个是已经封装好的！一定要记住！
$count = $this->db->count_all('user'); //统计数量（total输出）
$limit1 = $this->db->limit($limit,$offset)->get('user')->result(); //根据limit和offset输出每页数据
$arr = array(
'total'=>$count,
'rows' => $limit1,
);
echo json_encode($arr);
}
}
?>
上面就是前段分页的啦。如果有什么问题，评论留言。效果如图：
②后端分页。
……这个没有什么技术含量。只要修改data-side-pagination="server"这个参数，就把它修改成由服务器分页啦。效果图如下：
是不是觉得啥区别都没有……就页面来看，是这样的。但是输出的数组个数是不同的。
总结一下前端分页和后端分页的区别：（。。肯定不止这两点区别，小菜鸡给大家磕头啦）
1、前端分页就是把所有的数据一次性输出来，然后在前端进行分页。后端分页是只传出当前页需要的limit条数据。看效果图里面的rows。
2、前端分页一般是处理一些数据少的。后端分页是处理数据多的。假设啊，你的数据有一万条，那你前端就需要一次性输出一万条。数据越多就越影响页面的加载速度。
还有，后端分页不是指在数据库里处理这些数据，是指数据从数据库传到后台，就是传到这个框架里面处理。
查询功能：
这个功能也不是大家想的这么复杂的。需要的是一个查询框，然后需要把查询变量传到后台，然后查找后返回结果就好了。
在后台要多查找框的内容进行一个判断，如果里面没有内容就是输出这一页的结果，如果有内容，就把这个内容模糊查找出来。
a.前端参数：只要添加一个data-search="true"就可以了，这个参数一样是通过get方式传到后端
b.后端代码：先接受了get来的查询内容，然后模糊查找就可以啦。
前端代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <?php $this->load->helper('url');?>
5 <meta charset="utf-8">
6 <title>首页</title>
7 <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
8 <script type="text/javascript" src="style/js/bootstrap.js"></script>
9 <link rel="stylesheet" type="text/css" href="style/css/bootstrap-table.min.css">
10 <link rel="stylesheet" type="text/css" href="style/css/bootstrap.css">
11 <script type="text/javascript" src="style/js/bootstrap-table.min.js"></script>
12 <!-- 记得引入这一堆东西 -->
13 </head>
14 <body>
15 <table id="table"
16 data-toggle="table"
17 data-url="<?php echo base_url('index.php/work/index');?>"
18 data-pagination="true"
19 data-side-pagination="server"
20 data-search="true">
21 <thead>
22 <tr>
23 <th data-field="u_id">ID</th>
24 <th data-field="u_name">用户名</th>
25 <th data-field="u_tel">电话</th>
26 </tr>
27 </thead>
28
29 </table>
30 </body>
31 </html>
后端代码如下：
1 <?php
2 class Work extends CI_Controller{
3 public function index(){
4 $this->load->database();
5 // $arr = $this->db->get('user')->result(); //获取数据库表信息
6
7 $limit = $this->input->get('limit'); //前端传的数据
8 $offset = $this->input->get('offset'); //这个是已经封装好的！一定要记住！
9
10 $search = $this->input->get('search'); //获取前端传进来的查找内容
11
12 //判断查找框内是否有内容
13 if($search != ''){
14 //模糊查询并记录条数
15 $limit1 = $this->db->like('u_name',$search)
16 ->limit($limit,$offset)
17 ->get('user')
18 ->result_array();
19 //模糊查询并记录总数(这里注意一下，最后的count_all_results这个是最后有一个s的！！！)
20 $count = $this->db->like('u_name',$search)->count_all_results('user');
21 }else{
22 $count = $this->db->count_all('user'); //统计数量（total输出）
23 $limit1 = $this->db->limit($limit,$offset)->get('user')->result();
24 }
25
26
27 //根据limit和offset输出每页数据
28
29 $arr = array(
30 'total'=>$count,
31 'rows' => $limit1,
32 );
33 echo json_encode($arr);
34 }
35 }
36 ?>
em……其实做这个东西我的路径经常报错，所以我补充一下我的config文件的路径（这两个参数在config文件夹的config.php文件里面）
$config['base_url'] = '/ci2/';
$config['index_page'] = 'index.php';
解释一下：一般我们都会直接输入localhost/项目文件夹/控制器名/文件名，其实正确的访问时是：localhost/项目文件夹/index.php/控制器名/文件名
这里面的index.php就是我们在配置文件里面设置的这个东西，所以如果出现路径问题，就多试试改这两个，然后对比多几次就能知道了。
em，我在实现功能的时候都是用的url而不是用redirect，用url就代表着在路径会出现问题。所以。。。就是小菜鸡啊 T_T
总结一下：
1、我做这个的错误：
（1）最多的就是路径问题，当你访问失败返回404的时候，其实有两种不用的页面
蓝色的404很大可能就是访问路径出现问题，要通过F12来看它到底是访问了哪个。
白色的那个404就代码问题和路径问题都有可能。
(2)样式的引入，这个其实也是路径问题……
2、CORS问题，这个问题很好解决的，$config['base_url'] 这个参数不用留空就行，就是补一个斜杆，也不会报错
其他：PHP的后端处理代码和以前的会有点不一样，因为在CI框架里面有个叫做AR模型的东西，能简化一些代码，但是如果不熟……debug整到癫疯。
bootstrap-table的功能很强大，如果是做一些表格数据多的页面，直接整一个这个前端框架，属性记着常用的，就坐起来快很多。
菜鸡哔哔：json格式是一种数据格式，json是一种对象，可以包括数组和再嵌套对象。里面基本上是以键值对的形式存在。然后用的话也不是很需要技术，就按照数组返回就可以了。其他详细的，我立个flag，后面补。。。。
小菜鸡的实践over。谢谢观看。
内容总结
以上是互联网集市为您收集整理的简单的CI+PHPstudy+bootstrap-table的分页和查询全部内容，希望文章能够帮你解决简单的CI+PHPstudy+bootstrap-table的分页和查询所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。