tp5框架datatables后端分页搜索

最新推荐文章于 2021-08-05 15:52:48 发布

阅读量163

点赞数

文章标签： ThinkPHP5 DataTables 前端分页后端搜索 AJAX请求

本文链接：https://blog.csdn.net/zxdcyybz/article/details/115080064

版权

@ 作者：纵这世界多喧嚣

tp5框架datatables后端分页搜索

前端代码.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
</head>
<body>
<!--第二步：添加如下 HTML 代码-->
<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th >id</th>
        <th>文章标题</th>
        <th>文章作者</th>
        <th>文章简介</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
</body>
</html>
<script>
    // <!--第三步：初始化Datatables-->
    $(document).ready( function () {
        $('#table_id_example').DataTable({
            serverSide:true,
            "ajax": " http://localhost/2.23zuoye/public/index.php/index/index/indexs",
            "columns": [
                {"data": "id"},
                {"data": "title"},
                {"data": "name"},
                {"data": "desn"},
            ]
        });
    } );
</script>

后端代码

    public function indexs(Request $request){
//        获取到分页开始的位置
        $start=$request->get('start');
//        获取到分页结束的位置
        $length=$request->get('length');
//        获取到搜索的条件
        $search=$request->get('search.value');
//        Illuminate\Support\Facades\Redis
        $data=Db::table('zfw_articles')->where('title','like',"%$search%")->limit($start,$length)->select();
        foreach ($data as $key=>&$val){
                $val['title'] =str_replace($search, "<font style='color: #ff0000'>$search</font>",$val['title']);
        }
        return json(['code'=>200,'msg'=>'查询成功','data'=>$data]);
    }

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
tp5框架datatables后端分页搜索

@ 作者：纵这世界多喧嚣tp5框架datatables后端分页搜索前端代码.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>   &lt
复制链接

扫一扫