TP5后台处理数据+Datatables 前台渲染数据知识点小结

最新推荐文章于 2023-03-15 18:30:11 发布

三苗同学

最新推荐文章于 2023-03-15 18:30:11 发布

阅读量1.1k

点赞数

分类专栏： thinkphp5 Datatables 文章标签： tinkphp5 datatables

本文链接：https://blog.csdn.net/u010377516/article/details/101062788

版权

thinkphp5 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Datatables

1 篇文章 0 订阅

订阅专栏

软件版本：thinkPHP 5.0.24 +Datatables 1.10.4

当初次接触 Datatables 的时候也是一头雾水，通过同事帮助和查找手册，最终调试成功。

以下图的界面处理为例来说明一下其中用到的一些知识点。包括页面数据分页和删除按钮操作。

数据由后台处理，前台调用。直接上代码：

1、前端代码部分：

① css 部分

   <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="content-block">
                <!-- <div class="block-title">小标题</div> -->
                <div class="block-content">
                    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>KEY值</th>
                            <th>URL地址</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

② js 部分

<script type="text/javascript">
    let table;
  $(function() {
    table= $('#example').DataTable({
      scrollX: true,
      processing: true,
      serverSide:true,
      ajax: {
        url: "{:url('admin/UrlHandleController/urlList')}",
        type: 'POST',
      },
      columns: [
        {data: "key"},
        {data: "value"},
        {data: null}
      ],
      columnDefs: [{
        //   指定第最后一列
        targets: 2,
        render: function(data, type, row, meta) {
          return '<button class="btn btn-danger btn-xs job_operate job_list_del" _type="job_del" type="button"  data-key="'+row.key+'" onclick="del(this)" >删除</button>';
        }
      }]

    });

  });

  //删除方法
  function del(data) {
    let key=$(data).attr("data-key")

    $("#removeList").show();
    $("#removeList .layui-layer-close,#removeList .layui-layer-btn1").click(function(){
      $("#removeList").hide();
    })
    $("#removeList .layui-layer-btn0").click(function(){
      $("#removeList").hide();
      // 删除这条数据

      $.ajax({
        url: "{:url('admin/UrlHandleController/delUrl')}",
        type:'POST',
        //在后台接受key这个参数
        data: {
          key: key
        },
        success: function(data) {
          console.log(data)
          if (data.code==200) {
            //如果后台删除成功，则刷新表格，并提示用户删除成功
            showTips();
            $("#popupTips #tipsText p").text("删除成功");
            //保留分页信息
            table.ajax.reload(null, false);
          }
        }
      })

    })

  }
</script>

其中，js的前半部分是获取数据分页，后半部分是删除操作。

一、先说一下获取数据分页

获取数据请求的接口地址是：url: "{:url('admin/UrlHandleController/urlList')}", 它对应的后端方法是：

   /**
     * Function urlList
     * url 列表
     * @access  public
     * @return array
     * @author sunct
     * @time  2019-09-18 16:17
     * @since 1.0
     */
    public function urlList(){
        $draw = input('draw/d')?:1;//这个值作者会直接返回给前台
        $page = input('start/d')?:0;//从多少开始
        $size = input('length/d')?:CommonConfig::ES_PAGE_SIZE;//数据长度
        //搜索
        $input = input();//获取前台传过来的过滤条件
        $search=$input['search']['value']?:'';

        $params['draw']=$draw;
        $params['start']=$page;
        $params['size']=$size;
        $params['search']=$search;
        $UrlHandleService = UrlHandleService::getInstance();
        $data = $UrlHandleService->getUrlFromRedis($params);
        if(request()->isPost()) {
            return $data;
        }

        $this->assign('title','URL处理列表');
        $this->assign('addurl',url('admin/UrlHandleController/handleUrl'));
        return $this->fetch("/url_list");
    }

说明：参数$draw、$start、$length 和 $search 都是从前端传过来的数据。也是我们查询数据需要的参数。

后端处理完数据后，返回数据格式为：

本例中数据返回的为如下代码部分：

{
    "draw": 1,
    "recordsTotal": 11,
    "recordsFiltered": 11,
    "length": 10,
    "data": [
        {
            "key": "nginx_log_s",
            "value": "https://www.baidu.com/s"
        },
        {
            "key": "nginx_log_example_api_form.html",
            "value": "http://www.datatables.club/example/api/form.html"
        },
        {
            "key": "nginx_log_super_articledetail",
            "value": "https://www.youlai.cn/super/articledetail"
        },
        {
            "key": "nginx_log_getjkyxcodejsonp",
            "value": "https://s.cnkang.com/getjkyxcodejsonp"
        },
        {
            "key": "nginx_log_video_pcarticle",
            "value": "https://www.youlai.cn/video/pcarticle"
        },
        {
            "key": "nginx_log_video_pcarticlepv",
            "value": "https://www.youlai.cn/video/pcarticlepv"
        },
        {
            "key": "nginx_log_api_video_get_relation",
            "value": "https://m.youlai.cn/api_video/get_relation"
        },
        {
            "key": "nginx_log_chart_qrcode",
            "value": "https://www.youlai.cn/chart/qrcode"
        },
        {
            "key": "nginx_log_ask_voicepri",
            "value": "https://www.youlai.cn/ask/voicepri"
        },
        {
            "key": "nginx_log_youlaihitcount",
            "value": "https://api.youlai.cn/youlaihitcount"
        }
    ]
}

如有不懂的地方可参照官网手册。地址：服务器处理(Server-side processing)

然后前端Datatables 就可以实现自动分页的数据。

删除操作正常使用ajax 就可以了。说明见代码注释。

其中弹窗部分样式如图（可自行设置）：

弹窗部分代码如下：

<!-- 成功提示 start -->
<div id="popupTips" style="display: none;">
    <div class="layui-layer-shade" id="layui-layer-shade2" times="2" style="z-index: 19891015;background-color: rgb(0, 0, 0); opacity: 0.3;"></div>
    <div class="layui-layer layui-layer-dialog" id="layui-layer2" type="dialog" times="2" showtime="0" contype="string" style="z-index: 19891016;top: 50%; left: 50%;margin: -75px 0 0 -130px;">
        <div class="layui-layer-title" style="cursor: move;">系统提示</div>
        <div id="tipsText" class="layui-layer-content layui-layer-padding">
            <i class="layui-layer-ico layui-layer-ico1"></i>
            <p>删除成功</p>
        </div>
        <span class="layui-layer-setwin"><a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a></span>
        <div class="layui-layer-btn layui-layer-btn-"><a class="layui-layer-btn0">确定</a></div>
        <span class="layui-layer-resize"></span>
    </div>
</div>

<script type="text/javascript">
  function showTips(){
    $("#popupTips").show();
  }
  $("#popupTips .layui-layer-close").click(function(){
    $("#popupTips").hide();
  })
  $("#popupTips .layui-layer-btn0").click(function(){
    $("#popupTips").hide();
    // 点击确定后执行 在这写
  })
</script>
<!-- 成功提示 end -->
<!-- 删除 start -->
<div id="removeList" style="display: none;">
    <div class="layui-layer-shade" id="layui-layer-shade2" times="2" style="z-index: 19891015;background-color: rgb(0, 0, 0); opacity: 0.3;"></div>
    <div class="layui-layer layui-layer-dialog" id="layui-layer2" type="dialog" times="2" showtime="0" contype="string" style="z-index: 19891016;top: 50%; left: 50%;margin: -75px 0 0 -130px;">
        <div class="layui-layer-title" style="cursor: move;">系统提示</div>
        <div id="" class="layui-layer-content layui-layer-padding">
            <i class="layui-layer-ico layui-layer-ico3"></i>确定删除?
        </div>
        <span class="layui-layer-setwin"><a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a></span>
        <div class="layui-layer-btn layui-layer-btn-"><a class="layui-layer-btn0">确定</a><a class="layui-layer-btn1">取消</a></div>
        <span class="layui-layer-resize"></span>
    </div>
</div>
<!-- 删除 end -->

最后，附参考链接：

http://datatables.club/example/data_sources/server_side.html

http://datatables.club/manual/server-side.html

http://www.datatables.club/reference/api/ajax.reload().html

http://datatables.club/manual/daily/2016/04/18/option-ajax.html

http://datatables.club/manual/daily/2016/04/26/option-columns-render2.html（option columns.render 渲染列(2) 添加自定义按钮）

如果有相关需要可联系我本人（联系方式可参照置顶文章：获取我的联系方式）获取。希望对你有所帮助。

三苗同学

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
TP5后台处理数据+Datatables 前台渲染数据知识点小结

软件版本：thinkPHP 5.0.24 +Datatables 1.10.4当初次接触Datatables 的时候也是一头雾水，通过同事帮助和查找手册，最终调试成功。以下图的界面处理为例来说明一下其中用到的一些知识点。包括页面数据分页和删除按钮操作。数据由后台处理，前台调用。直接上代码：1、前端代码部分：① css 部分 <div cla...
复制链接

扫一扫