datatable自定义表单或者导出excel按钮,搜索

其他 2021-03-31 11:42:57 阅读次数: 0

完整版
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>1151s</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" href="../../plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="../../plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <link rel="stylesheet" href="../../plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
  <style>
    body,
    html {
     
     
      padding: 30px;
    }

    .bottom>div {
     
     
      display: inline-block;
    }

    #example_paginate {
     
     
      float: right;
    }

    #example_length {
     
     
      margin-left: 10px;
    }

    /* #btnshow>div {
      display: flex;
    }

    #btnshow>div>button {
      margin: auto;
    } */
  </style>
</head>

<body>
  <!-- 自定义搜索框 -->
  <div class="search">
    用户名称：<input type="text" class="input-text" style="width:250px" placeholder="输入用户名称" id="name" name="name">
    用户手机：<input type="text" class="input-text" style="width:250px" placeholder="输入用户电话" id="phone" name="phone">
    <button type="submit" class="btn btn-success" onclick="search()"><i class="icon-search"></i> 搜用户
    </button>
  </div>
  <!-- 按钮显示区域 -->
  <div id="btnshow" >
    <button class="btn btn-success">添加</button>
  </div>
  <table id="example" class="table table-bordered   table-hover  table-sm">

    <thead class="thead-light">
      <tr>

      </tr>
    </thead>

  </table>

  <!-- jQuery -->
  <script src="../../plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap 4 -->
  <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- DataTables  & Plugins -->
  <script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
  <script src="../../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
  <script src="../../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
  <script src="../../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
  <script src="../../plugins/jszip/jszip.min.js"></script>
  <script src="../../plugins/pdfmake/pdfmake.min.js"></script>
  <script src="../../plugins/pdfmake/vfs_fonts.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.print.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
  <!-- AdminLTE App -->
  <script src="../../dist/js/adminlte.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="../../dist/js/demo.js"></script>
  <!-- Page specific script -->
  <script>

    var timer = null; //延时搜索，
    var timeout = 1000; // 当在搜索时，只有超过间隔时间（1000）才开始搜索
    var url = "./demo.php" //请求地址
    var delurl = "./demo.php" //请求地址
    var table = null; //表格
    var request = (url, params, method = "GET") => {
     
     
      return new Promise((resolve, reject) => {
     
     
        $.ajax({
     
     
          type: method,
          url: url,
          cache: false, //禁用缓存
          data: params, //传入组装的参数
          dataType: "json",
          success: function (result) {
     
     
            resolve(result);
          },
          error: function () {
     
     
            reject('出错')
          }
        });
      })
    }
    // 修改
    function update(me) {
     
     
      var row = table.rows($(me).parents('tr')).data()[0]; // 选中行数的数据
      alert('修改：' + JSON.stringify(row))
    }
    // 删除
    async function del(me) {
     
     
      var row = table.rows($(me).parents('tr')).data()[0]; // 选中行数的数据
      var {
     
      first_name } = row; //这里一般是主键，但是没有传过来的id值，这里就用name替代了
      var param = {
     
      first_name, method: 'del' }; //传递的参数，也可以在添加一些判断条件
      var res = await request(delurl, param);
      if (res && res.code == 0) {
     
      //判断返回的数据
        $(me).parents('tr').remove();
        alert('删除成功')
      }
    }
    // 搜索
    function search() {
     
     
      table.draw();
    }
    $(document).ready(function () {
     
     
      table = $("#example").DataTable({
     
     
        "processing": true,
        "serverSide": true,
        ajax: function (data, callback, settings) {
     
     
          // 自定义搜索
          data.search = {
     
     
            name: $('#name').val(),
            phone: $('#phone').val(),
          }
          // console.log(data);
          request(url, data).then(result => {
     
     
            callback(result);
          })
        },
        "columns": [{
     
     
          'sTitle': '第一个名字', //在thead中显示，有过原来有thead则替换
          "data": "first_name",
          "width": '20%',
          'render': function (data, type, row) {
     
     
            return "<span style='color:red'>" + data + '</span>';
          },
          'class': 'text-center', //添加一个css
        },
        {
     
     
          'sTitle': '最后一个名字', //在thead中显示，有过原来有thead则替换
          "data": "last_name", "orderable": false
        },
        {
     
     
          "sTitle": '操作',
          "orderable": false,
          'render': function (data, type, row) {
     
     
            return `
              <button type="button" class="btn btn-sm btn-info" οnclick="update(this)">修改</>
              <button type="button" class="btn btn-sm btn-danger " οnclick="del(this)">删除</button>
                  `;
          },
        }

        ],
        "language": //把文字变为中文
        {
     
     
          "sProcessing": "加载中...",
          "sLengthMenu": "每页显示 _MENU_  条记录",
          "sZeroRecords": "没有匹配结果",
          "sInfo": "第 _START_ - _END_ 条,共计 _TOTAL_ 条",
          "sInfoFiltered": "",
          "sInfoPostFix": "",
          "sSearch": "搜索:",
          "sUrl": "",
          "sEmptyTable": "表中数据为空",
          "sLoadingRecords": "载入中...",
          "sInfoThousands": ",",
          "oPaginate": {
     
     
            "sPrevious": "<", //上一页
            "sNext": ">", //下一页
          },
        },
        'aLengthMenu': [3, 10, 20, 30], //设置每页显示记录的下拉菜单
        dom: 'Bt<"bottom"ilp><"clear">',
        "buttons": [
          {
     
     
            extend: 'collection',
            text: '导出',
            className: "btn-success",
            buttons:
              [
                {
     
     
                  extend: 'copy',//使用 excel扩展
                  text: '复制本页数据',// 显示文字

                },
                {
     
      extend: 'pdf', text: '导出为pdf', filename: '数据表', title: '标题', },
                {
     
      extend: 'csv', text: '导出为csv', filename: '数据表', title: '标题', },
                {
     
      extend: "print", text: '导出为print', filename: '数据表', title: '标题', },
                {
     
      extend: 'excel', text: '导出为excel', filename: '数据表', title: '标题', },],
            // fade: true
          }
          ,
          {
     
     
            extend: "colvis",
            text: '显示列',
            className: "btn-info",

          },

        ],

        "autoWidth": false,
        searching: false,

      })
      table.buttons().container().prependTo('#btnshow'); //将按钮添加到自己新建的expot中
      // $("#btnshow>div").removeClass()

    });



  </script>
</body>

</html>

第一版，修改位置
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | DataTables</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" href="../../plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="../../plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <link rel="stylesheet" href="../../plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
  <style>
    body,
    html {
     
     
      padding: 30px;
    }

    .bottom>div {
     
     
      display: inline-block;
    }

    #example_paginate {
     
     
      float: right;
    }
    #example_length{
     
     
      margin-left: 10px;
    }
  </style>
</head>

<body>


  <table id="example" class="table table-bordered table-striped">



  </table>
  <!-- jQuery -->
  <script src="../../plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap 4 -->
  <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- DataTables  & Plugins -->
  <script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
  <script src="../../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
  <script src="../../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
  <script src="../../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
  <script src="../../plugins/jszip/jszip.min.js"></script>
  <script src="../../plugins/pdfmake/pdfmake.min.js"></script>
  <script src="../../plugins/pdfmake/vfs_fonts.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.print.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
  <!-- AdminLTE App -->
  <script src="../../dist/js/adminlte.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="../../dist/js/demo.js"></script>
  <!-- Page specific script -->
  <script>

    var timer = null; //延时搜索，
    var timeout = 1000; // 当在搜索时，只有超过间隔时间（1000）才开始搜索
    var url = "./demo.php" //请求地址
    var delurl = "./demo.php" //请求地址
    var table = null; //表格
    var request = (url, params, method = "GET") => {
     
     
      return new Promise((resolve, reject) => {
     
     
        $.ajax({
     
     
          type: method,
          url: url,
          cache: false, //禁用缓存
          data: params, //传入组装的参数
          dataType: "json",
          success: function (result) {
     
     
            resolve(result);
          },
          error: function () {
     
     
            reject('出错')
          }
        });
      })
    }
    // 修改
    function update(me) {
     
     
      var row = table.rows($(me).parents('tr')).data()[0]; // 选中行数的数据
      alert('修改：' + JSON.stringify(row))
    }
    // 删除
    async function del(me) {
     
     
      var row = table.rows($(me).parents('tr')).data()[0]; // 选中行数的数据
      var {
     
      first_name } = row; //这里一般是主键，但是没有传过来的id值，这里就用name替代了
      var param = {
     
      first_name, method: 'del' }; //传递的参数，也可以在添加一些判断条件
      var res = await request(delurl, param);
      if (res && res.code == 0) {
     
      //判断返回的数据
        $(me).parents('tr').remove();
        alert('删除成功')
      }
    }

    $(document).ready(function () {
     
     
      table = $("#example").DataTable({
     
     
        "processing": true,
        "serverSide": true,
        ajax: function (data, callback, settings) {
     
     
          request(url, data).then(result => {
     
     
            callback(result);
          })
        },
        "columns": [{
     
     
          'sTitle': '第一个名字', //在thead中显示，有过原来有thead则替换
          "data": "first_name",
          "width": '20%',
          'render': function (data, type, row) {
     
     
            return "<span style='color:red'>" + data + '</span>';
          },
          'class': 'text-center', //添加一个css
        },
        {
     
     
          'sTitle': '最后一个名字', //在thead中显示，有过原来有thead则替换
          "data": "last_name", "orderable": false
        },
        {
     
     
          "sTitle": '操作',
          "orderable": false,
          'render': function (data, type, row) {
     
     
            return `
              <button type="button" class="btn btn-sm btn-info" οnclick="update(this)">修改</>
              <button type="button" class="btn btn-sm btn-danger " οnclick="del(this)">删除</button>
                  `;
          },
        }

        ],
        "language": //把文字变为中文
        {
     
     
          "sProcessing": "加载中...",
          "sLengthMenu": "每页显示 _MENU_  条记录",
          "sZeroRecords": "没有匹配结果",
          "sInfo": "第 _START_ - _END_ 条,共计 _TOTAL_ 条",
          "sInfoFiltered": "",
          "sInfoPostFix": "",
          "sSearch": "搜索:",
          "sUrl": "",
          "sEmptyTable": "表中数据为空",
          "sLoadingRecords": "载入中...",
          "sInfoThousands": ",",
          "oPaginate": {
     
     
            "sPrevious": "<", //上一页
            "sNext": ">", //下一页
          },
        },
        'aLengthMenu': [3, 10, 20, 30], //设置每页显示记录的下拉菜单
        dom: 'Bt<"bottom"ilp><"clear">',
        "buttons": [ "excel", "pdf", "print", "colvis"],
        searching: false

      })

    });

  </script>
</body>

</html>

第二版，添加按钮组
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>data</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" href="../../plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="../../plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <link rel="stylesheet" href="../../plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
  <style>
    body,
    html {
     
     
      padding: 30px;
    }

    .bottom>div {
     
     
      display: inline-block;
    }

    #example_paginate {
     
     
      float: right;
    }

    #example_length {
     
     
      margin-left: 10px;
    }

    .blue {
     
     
      background-color: blue;
    }
 
  </style>
</head>

<body>


  <table id="example" class="table table-bordered table-striped">



  </table>
  <!-- jQuery -->
  <script src="../../plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap 4 -->
  <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- DataTables  & Plugins -->
  <script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
  <script src="../../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
  <script src="../../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
  <script src="../../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
  <script src="../../plugins/jszip/jszip.min.js"></script>
  <script src="../../plugins/pdfmake/pdfmake.min.js"></script>
  <script src="../../plugins/pdfmake/vfs_fonts.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.print.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
  <!-- AdminLTE App -->
  <script src="../../dist/js/adminlte.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="../../dist/js/demo.js"></script>
  <!-- Page specific script -->
  <script>

    var timer = null; //延时搜索，
    var timeout = 1000; // 当在搜索时，只有超过间隔时间（1000）才开始搜索
    var url = "./demo.php" //请求地址
    var delurl = "./demo.php" //请求地址
    var table = null; //表格
    var request = (url, params, method = "GET") => {
     
     
      return new Promise((resolve, reject) => {
     
     
        $.ajax({
     
     
          type: method,
          url: url,
          cache: false, //禁用缓存
          data: params, //传入组装的参数
          dataType: "json",
          success: function (result) {
     
     
            resolve(result);
          },
          error: function () {
     
     
            reject('出错')
          }
        });
      })
    }
    // 修改
    function update(me) {
     
     
      var row = table.rows($(me).parents('tr')).data()[0]; // 选中行数的数据
      alert('修改：' + JSON.stringify(row))
    }
    // 删除
    async function del(me) {
     
     
      var row = table.rows($(me).parents('tr')).data()[0]; // 选中行数的数据
      var {
     
      first_name } = row; //这里一般是主键，但是没有传过来的id值，这里就用name替代了
      var param = {
     
      first_name, method: 'del' }; //传递的参数，也可以在添加一些判断条件
      var res = await request(delurl, param);
      if (res && res.code == 0) {
     
      //判断返回的数据
        $(me).parents('tr').remove();
        alert('删除成功')
      }
    }

    $(document).ready(function () {
     
     
      table = $("#example").DataTable({
     
     
        "processing": true,
        "serverSide": true,
        ajax: function (data, callback, settings) {
     
     
          request(url, data).then(result => {
     
     
            callback(result);
          })
        },
        "columns": [{
     
     
          'sTitle': '第一个名字', //在thead中显示，有过原来有thead则替换
          "data": "first_name",
          "width": '20%',
          'render': function (data, type, row) {
     
     
            return "<span style='color:red'>" + data + '</span>';
          },
          'class': 'text-center', //添加一个css
        },
        {
     
     
          'sTitle': '最后一个名字', //在thead中显示，有过原来有thead则替换
          "data": "last_name", "orderable": false
        },
        {
     
     
          "sTitle": '操作',
          "orderable": false,
          'render': function (data, type, row) {
     
     
            return `
              <button type="button" class="btn btn-sm btn-info" οnclick="update(this)">修改</>
              <button type="button" class="btn btn-sm btn-danger " οnclick="del(this)">删除</button>
                  `;
          },
        }

        ],
        "language": //把文字变为中文
        {
     
     
          "sProcessing": "加载中...",
          "sLengthMenu": "每页显示 _MENU_  条记录",
          "sZeroRecords": "没有匹配结果",
          "sInfo": "第 _START_ - _END_ 条,共计 _TOTAL_ 条",
          "sInfoFiltered": "",
          "sInfoPostFix": "",
          "sSearch": "搜索:",
          "sUrl": "",
          "sEmptyTable": "表中数据为空",
          "sLoadingRecords": "载入中...",
          "sInfoThousands": ",",
          "oPaginate": {
     
     
            "sPrevious": "<", //上一页
            "sNext": ">", //下一页
          },
        },
        'aLengthMenu': [3, 10, 20, 30], //设置每页显示记录的下拉菜单
        dom: 'Bt<"bottom"ilp><"clear">',
        "buttons": ["copy","pdf",
        //  "csv",  "print", "colvis",
          {
     
     
            extend: 'excel',//使用 excel扩展
            text: '导出excel',// 显示文字
            filename: '数据表',
            className: 'btn-success', // .blue
            title: '标题',
          }
        ],
        searching: false
      })
     
      var domgroupstr = `<div class="dt-buttons btn-group flex-wrap" style="margin-left:30px">
         <button class="btn btn-secondary buttons-copy buttons-html5" tabindex="0" aria-controls="example" type="button"><span>组1</span></button>
         <button class="btn btn-secondary buttons-copy buttons-html5" tabindex="0" aria-controls="example" type="button"><span>组2</span></button>
          </div>`;
          var domstr = `
         <button  style="margin-left:30px" class="btn btn-secondary buttons-copy buttons-html5" tabindex="0" aria-controls="example" type="button"><span>按钮</span></button>
          `
      $('.btn-group').eq(-1).after(domgroupstr); //添加按钮组
      $('.btn-group').eq(-1).after(domstr); //添加按钮
    });
 

    
  </script>
</body>

</html>

第三版，按钮位置自定义，搜索自定义
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>1151s</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" href="../../plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="../../plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <link rel="stylesheet" href="../../plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
  <style>
    body,
    html {
     
     
      padding: 30px;
    }

    .bottom>div {
     
     
      display: inline-block;
    }

    #example_paginate {
     
     
      float: right;
    }

    #example_length {
     
     
      margin-left: 10px;
    }

 #btnshow>div{
     
     
   display: flex;
 }
 #btnshow>div>button{
     
     
   margin: auto;
 }
  </style>
</head>

<body>
  <!-- 自定义搜索框 -->
  <div class="search">
    用户名称：<input type="text" class="input-text" style="width:250px" placeholder="输入用户名称" id="name" name="name">
    用户手机：<input type="text" class="input-text" style="width:250px" placeholder="输入用户电话" id="phone" name="phone">
    <button type="submit" class="btn btn-success" onclick="search()"><i class="icon-search"></i> 搜用户
    </button>
  </div>
  <table id="example" class="table table-bordered   table-hover  table-sm">

    <thead class="thead-light">
      <tr>
 
      </tr>
    </thead>

  </table>
<!-- 按钮显示区域 -->
  <div id="btnshow">

  </div>
  <!-- jQuery -->
  <script src="../../plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap 4 -->
  <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- DataTables  & Plugins -->
  <script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
  <script src="../../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
  <script src="../../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
  <script src="../../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
  <script src="../../plugins/jszip/jszip.min.js"></script>
  <script src="../../plugins/pdfmake/pdfmake.min.js"></script>
  <script src="../../plugins/pdfmake/vfs_fonts.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.print.min.js"></script>
  <script src="../../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
  <!-- AdminLTE App -->
  <script src="../../dist/js/adminlte.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="../../dist/js/demo.js"></script>
  <!-- Page specific script -->
  <script>

    var timer = null; //延时搜索，
    var timeout = 1000; // 当在搜索时，只有超过间隔时间（1000）才开始搜索
    var url = "./demo.php" //请求地址
    var delurl = "./demo.php" //请求地址
    var table = null; //表格
    var request = (url, params, method = "GET") => {
     
     
      return new Promise((resolve, reject) => {
     
     
        $.ajax({
     
     
          type: method,
          url: url,
          cache: false, //禁用缓存
          data: params, //传入组装的参数
          dataType: "json",
          success: function (result) {
     
     
            resolve(result);
          },
          error: function () {
     
     
            reject('出错')
          }
        });
      })
    }
    // 修改
    function update(me) {
     
     
      var row = table.rows($(me).parents('tr')).data()[0]; // 选中行数的数据
      alert('修改：' + JSON.stringify(row))
    }
    // 删除
    async function del(me) {
     
     
      var row = table.rows($(me).parents('tr')).data()[0]; // 选中行数的数据
      var {
     
      first_name } = row; //这里一般是主键，但是没有传过来的id值，这里就用name替代了
      var param = {
     
      first_name, method: 'del' }; //传递的参数，也可以在添加一些判断条件
      var res = await request(delurl, param);
      if (res && res.code == 0) {
     
      //判断返回的数据
        $(me).parents('tr').remove();
        alert('删除成功')
      }
    }
    // 搜索
    function search() {
     
     
      table.draw();
    }
    $(document).ready(function () {
     
     
      table = $("#example").DataTable({
     
     
        "processing": true,
        "serverSide": true,
        ajax: function (data, callback, settings) {
     
     
          // 自定义搜索
          data.search = {
     
     
            name: $('#name').val(),
            phone: $('#phone').val(),
          }
          // console.log(data);
          request(url, data).then(result => {
     
     
            callback(result);
          })
        },
        "columns": [{
     
     
          'sTitle': '第一个名字', //在thead中显示，有过原来有thead则替换
          "data": "first_name",
          "width": '20%',
          'render': function (data, type, row) {
     
     
            return "<span style='color:red'>" + data + '</span>';
          },
          'class': 'text-center', //添加一个css
        },
        {
     
     
          'sTitle': '最后一个名字', //在thead中显示，有过原来有thead则替换
          "data": "last_name", "orderable": false
        },
        {
     
     
          "sTitle": '操作',
          "orderable": false,
          'render': function (data, type, row) {
     
     
            return `
              <button type="button" class="btn btn-sm btn-info" οnclick="update(this)">修改</>
              <button type="button" class="btn btn-sm btn-danger " οnclick="del(this)">删除</button>
                  `;
          },
        }

        ],
        "language": //把文字变为中文
        {
     
     
          "sProcessing": "加载中...",
          "sLengthMenu": "每页显示 _MENU_  条记录",
          "sZeroRecords": "没有匹配结果",
          "sInfo": "第 _START_ - _END_ 条,共计 _TOTAL_ 条",
          "sInfoFiltered": "",
          "sInfoPostFix": "",
          "sSearch": "搜索:",
          "sUrl": "",
          "sEmptyTable": "表中数据为空",
          "sLoadingRecords": "载入中...",
          "sInfoThousands": ",",
          "oPaginate": {
     
     
            "sPrevious": "<", //上一页
            "sNext": ">", //下一页
          },
        },
        'aLengthMenu': [3, 10, 20, 30], //设置每页显示记录的下拉菜单
        dom: 'Bt<"bottom"ilp><"clear">',
        "buttons": ["copy", "pdf", "copy", "csv", "pdf", "print", "colvis",   
          {
     
     
            extend: 'excel',//使用 excel扩展
            text: '导出excel',// 显示文字
            filename: '数据表',
            className: 'btn-success', // .blue
            title: '标题',
          }
        ],
        "autoWidth": false,
        searching: false,
        initComplete() {
     
     

          $('.submit').on('click', function () {
     
     
          })
        }
      })
      table.buttons().container().appendTo('#btnshow'); //将按钮添加到自己新建的expot中
      $("#btnshow>div").removeClass()
 

      

    });



  </script>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/weixin_44797182/article/details/110674714
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022