DataTables的简单使用教程

Datatables中文网手册：http://datatables.club/manual/install.html

从网站上下载 datatables安装包，将其解压到你的pubic目录下

html 伪代码示例：

可以引入线上的 dataTables 来进行使用

<!--第一步：引入Javascript / CSS （CDN）-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
 
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

 或者

    <!--第一步：引入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>

框架中的使用方法

 

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>DataTables</title>
 6     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 7     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 8     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
 9 
10     <link rel="stylesheet" type="text/css" href="/DataTables/media/css/jquery.dataTables.css">
11     <!-- jQuery -->
12     <script type="text/javascript" charset="utf8" src="/DataTables/media/js/jquery.js"></script>
13     <!-- DataTables -->
14     <script type="text/javascript" charset="utf8" src="/DataTables/media/js/jquery.dataTables.js"></script>
15 </head>
16 <body>
17 
18 <table id="table_id_example" class="display">
19     <thead>
20     <tr>
21         <th>ID</th>
22         <th>标题</th>
23         <th>图片</th>
24         <th>阅读数</th>
25         <th>内容</th>
26         <th>插入时间</th>
27         <th>修改时间</th>
28     </tr>
29     </thead>
30     <tbody>
31     
32     @foreach($data as $v)
33     <tr>
34         <td>{{$v->id}}</td>
35         <td>{{$v->title}}</td>
36         <td>{{$v->image}}</td>
37         <td>{{$v->readnum}}</td>
38         <td>{{$v->cont}}</td>
39         <td>{{$v->deleted_at}}</td>
40         <td>{{$v->created_at}}</td>
41    
42     </tr>
43     @endforeach
44     
45     </tbody>
46 </table>
47 
48 </body>
49 
50 </html>
51 <script>
52     $(document).ready( function () {
53         $('#table_id_example').DataTable();
54     });
55 </script>

 

接下来就是控制器中，控制器查询数据到这个展示页面

1    public function show(){
2 
3         $data=Article::get();
4         return view('show',['data'=>$data]);
5     }

 现在就可以实现一个简单的页面展示了DataTables 

 

 

laraver框架中使用示例代码

html代码

<div class="page-container"><form method="get" onsubmit="return search()">
        @csrf
    <div class="text-c"> 日期范围：
        <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })" id="datemin" class="input-text Wdate" style="width:120px;" name="datemin">
        -
        <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })" id="datemax" class="input-text Wdate" style="width:120px;" name="datemax">
        <input type="text" class="input-text" style="width:250px" placeholder="输入文章标题" id="title" name="title" value="">
        <button type="submit" class="btn btn-success " id="" name=""><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
    </div>
    </form>
    <div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"><a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> <a href="{{route('admin.article.create')}}"  class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加文章</a></span> <span class="r">共有数据：<strong>☀</strong> 条</span> </div>
    <table class="table table-border table-bordered table-bg">
        <thead>
        <tr>
            <th scope="col" colspan="9">文章列表</th>
        </tr>
        <tr class="text-c">
{{--            <th width="25"><input type="checkbox" name="" value=""></th>--}}
            <th width="40">ID</th>
            <th width="90">文章标题</th>
            <th width="50">作者</th>
            <th width="130">文章摘要</th>
            <th width="150">文章封面</th>
            <th width="130">加入时间</th>
            <th width="150">操作</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div><!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/admin/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
     //表单提交
       function search(){
           //手动调用一次ajax
           dataTable.ajax.reload();
           //取消表单默认行为
           return false;
       }

     var dataTable= $('.table-bg').DataTable({
            //分页数量
            lengthMenu:[5,10,20],
            //隐藏搜索
            searching:false,
            columnDefs:[
                //索引第一列不进行排序
                {targets:[0,6],orderable: false}
            ],
            //开启服务器端分页  使用ajax
            serverSide:true,
            //进行ajax请求
            ajax:{
                type:"get",
                //设置请求的地址
                url: "{{route('admin.article.index')}}",
                data:function (ret) {
                    ret.datemin=$("#datemin").val()
                    ret.datemax=$("#datemax").val()
                    ret.title=$("#title").val()
                }
        },
            // 指定每一累显示的数据
            columns:[
                {'data':'id','className':'text-c'},
                {'data':'title','className':'text-c'},
                {'data':'author','className':'text-c'},
                {'data':'desn','className':'text-c'},
                {'data':'pic','className':'text-c'},
                {'data':'created_at','className':'text-c'},
                {'data':'btn','className':'text-c'},
            ]

        });
       dataTable.on('draw',function () {
           $(".label-danger").click(function () {
               //获取url地址
               url= $(this).attr('href')
               //发送ajax
               $.ajax({
                   url,
                   type: "DELETE",
                   dataTable:'json',
                   data:{_token:"{{csrf_token()}}"},
               }).then((res)=>{
                   if (res.code==200){
                       layer.confirm('删除成功', {
                           btn: ['好的呢','要你有何用'] //按钮
                       }, function(){
                           layer.msg("呀呀，厉害了", {icon: 1});
                           location.reload()
                       }, function(){
                           layer.msg('行吧');
                       });
                   }
               })
               //禁止跳转
               return false;

           })

       })

</script>

 

 控制器代码

 public function index(Request $request)
    {
        //判断是否我ajax请求
      if ($request->ajax()){
          //获取起始的位置
          $start=$request->get('start')?: 0;
          $query=Article::where('id','>',0);
          //结收要搜索的内容
          //搜索关键字
          $title=$request->get('title');
          //搜索的开始时间
          $datemin=$request->get('datemin');
          //搜索的结束时间
          $datemax=$request->get('datemax');
          //如果有搜索的标题名时
          if (!empty($title)){
              $query=$query->where('title','like',"%$title%");
          }
          //按时间段搜索
          if (!empty($datemax) && !empty($datemin)){
              $query=$query->whereBetween('created_at', [$datemin, $datemax]);
          }

          //获取点击的排序列是第几列
           $ordercolumns=$request->get('order')[0]['column'];
         //获取这一列的名称
           $ordername=$request->get('columns')[$ordercolumns]['data'];
          //获取排序的方式 升序 or 降序
           $ordertyp=$request->get('order')[0]['dir'];
           $query=$query->orderBy($ordername,$ordertyp);

            //获取记录数
            $count=$query->count();
            //获取每页显示的条数
            $length=min(100,$request->get('length',10));
            //分页查询数据
            $data=$query->offset($start)->limit($length)->get();
            $result=[
                //客户端调用服务器的次数
                'draw'=>$request->get($request->get('draw')),
                //获取数据的总条数
                'recordsTotal'=>$count,
                //数据过滤后的总数量
                'recordsFiltered'=>$count,
                //查询到的具体数据
                'data'=>$data,
            ];
            return $result;
        }
        return view('admin.article.index');
    }

 

 

 

tp 框架中使用时简单示例代码

 

html页面

 

<body>
<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th> id</th>
        <th>标题</th>
        <th>内容</th>
        <th>独数</th>
        <th>赞数</th>
    </tr>
    </thead>
    <tbody>
    {volist name="data" id="vo"}
    <tr>
        <td>{$vo.id}</td>
        <td>{$vo.title}</td>
        <td>{$vo.content}</td>
        <td>{$vo.read}</td>
        <td>{$vo.zan}</td>
    </tr>
    {/volist}
    </tbody>
</table>

</body>

 

 

 

<script>
    $(document).ready( function () {
        $('#table_id_example').DataTable({
            //开启服务器模式
            serverSide:true,
            //设置每页显示的条数
            lengMenu:[5,10],
            ajax:"http://www.shili.com/index.php/databast/index/indexs",
            "columns":[
                {'data':"id"},
                {'data':"title"},
                {'data':"content"},
                {'data':"read"},
                {'data':"zan"},  
            ]
        });

    } );
</script>

 

控制器层代码

    public function index()
    {
        //查询数据  渲染视图
        $data=Db::table('article')->select();
        return view('index',compact('data'));

    }

    public function indexs(Request $request){
        //搜索的条件
        $search=$request->get('search.value');
        //后端分页的开始位置
        $start=$request->get('start');
        //lengt 后端分页结束的位置
        $length=$request->get('length');
        
        //搜索数据
        $data=Db::table('article')->where('title','like',"%$search%")->limit($start,$length)->select();
        
        //查询出数据存入redis中
       Cache::store('redis')->set('data',$data);
        //取出redis中存储的搜索条件
       Cache::store('redis')->get('data',$data);
        //条件高亮显示
        foreach ($data as $key=>&$val){
            $val['title'] =str_replace($search,"<font style='color: red'>$search</font>",$val['title']);
        }

        return json(['code'=>200,'msg'=>'查询成功','data'=>$data]);
    }

 

 

模型一些标识

    //定义完整的数据表名称
//    protected $table = 'goods';

    //设置软删除
    use \traits\model\SoftDelete;
    protected $deleteTime = 'delete_time';
    protected $hidden = ['create_time', 'update_time', 'delete_time'];

 

posted @ 2021-01-28 12:37  Conqueror·  阅读(590)  评论(0)    收藏  举报