datatable 配置演示、后台编辑、多语言设置

datatable 配置演示

• 复制示例源码
• 引入相关 css、js 文件
• 设置配置项，渲染数据

渲染数据

$(function () {
  $("#example1").DataTable({
    responsive: true,
    autoWidth: false,
    language: {
      processing: "处理中...",
      lengthMenu: "显示 _MENU_ 项结果",
      zeroRecords: "没有匹配结果",
      info: "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
      infoEmpty: "显示第 0 至 0 项结果，共 0 项",
      infoFiltered: "(由 _MAX_ 项结果过滤)",
      infoPostFix: "",
      search: "搜索:",
      searchPlaceholder: "搜索...",
      url: "",
      emptyTable: "表中数据为空",
      loadingRecords: "载入中...",
      infoThousands: ",",
      paginate: {
        first: "首页",
        previous: "上页",
        next: "下页",
        last: "末页",
      },
      aria: {
        paginate: {
          first: "首页",
          previous: "上页",
          next: "下页",
          last: "末页",
        },
        sortAscending: "以升序排列此列",
        sortDescending: "以降序排列此列",
      },
      thousands: ".",
    },
    stateSave: true,
    stateDuration: 0,
    paging: "true",
    rowId: "cou_id",
    ajax: {
      url: "getDataTable",
      type: "POST",
      dataType: "JSON",
      dataSrc: "tableData",
    },
    serverSide: true,
    columns: [
      {
        data: "cou_id",
        name: "课程编号",
      },
      {
        data: "title",
        name: "课程标题",
        orderable: false,
        width: "150px",
      },
      {
        data: "pic",
        name: "课程封面",
        orderable: false,
        render: function (data, type, row, meta) {
          return "<img style='width:200px' src='" + row.pic + "'>";
        },
      },
      {
        data: "info",
        name: "课程简介",
        orderable: false,
        width: "550px",
      },
      {
        targer: 4,
        orderable: false,
        render: function (data, type, row, meta) {
          var html = "";
          html +=
            '<a class="btn btn-primary"  href="edit?id=' +
            row.cou_id +
            '"><i class="fas fa-edit" title="编辑"></i></a>';
          html += "&nbsp;&nbsp;";
          html +=
            '<a style="color:#fff" class="btn btn-danger"  onclick="layer.confirm(\'移除后列表将不显示，可以从回收站找回？\', function(index){recycle(\'' +
            row.cou_id +
            '\');layer.close(index);}); "><i class="fas fa-recycle" title="移到回收站"></i></a>';
          return html;
        },
      },
    ],
  });
});

回收课程

function recycle(cou_id) {
  $.ajax({
    url: "recycle",
    type: "POST",
    dataType: "json",
    data: { id: cou_id },
    success: (res) => {
      if (res.code == 1) {
        $("#" + cou_id).remove();
        layer.msg(res.msg, { icon: 1 });
      } else {
        layer.msg(res.msg, { icon: 5 });
      }
    },
  });
}

多语言配置

• 打开中间件多语言配置: 全局middleware.php,添加\think\middleware\LoadLangPack::class,;
• html 中使用{$Think.lang.user.home}引用语言变量

语言包

<?php
return [
    'user'    =>    [
        'welcome'  => 'Welcome back',
        'login' => 'Sign up',
        'logout' => 'Log out',
        'register' => 'Sign in',
        'home'=>'home',
        'en'=>'en',
        'cn'=>'cn'
    ],
    'webtitle' => 'PBack-stage Management'
];
return [
    'user'    =>    [
        'welcome'  => '欢迎回来',
        'login' => '用户登录',
        'logout' => '用户登出',
        'register' => '用户注册',
        'home'=>'首页',
        'en'=>'英文',
        'cn'=>'中文'
    ],
    'webtitle' => '后台管理'
];

多语言参数，cookie 设置

public function langswitch()
    {
        $lang =  input('get.lang') ?? 'zn';
        // dd($lang);
        $lang = strtolower($lang);
        switch ($lang) {
            case 'zn':
                cookie('think_lang', 'zh-cn');
                break;
            case 'en':
                cookie('think_lang', 'en-us');
                break;
            default:
                cookie('think_lang', 'zh-cn');
                break;
        }
    }

[http://help10086.cn/admin/home]
测试账号密码:（amdin,123456）