2021年1月13日星期三

jquery表格插件Datatables使用、快速上手

Datatables使用

一、简介

官网：https://datatables.net/ 中文官网 javascript， Ajax 和 服务器处理

  • 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
  • 各式各样的扩展: Editor, TableTools, FixedColumns ……
  • 丰富多样的option和强大的API
  • 支持国际化
  • 超过2900+个单元测试
  • 免费开源
  • 更多特性请到官网查看

    • 二、使用

    1、引入相关js和css文件

    <!-- DataTables CSS --><link rel="stylesheet" type="text/css"href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css"><!-- jQuery --><script type="text/javascript" charset="utf8" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><!-- DataTables --><script type="text/javascript" charset="utf8"src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

    2、添加HTML代码

    table标签中thead、tbody必须存在

    <table id="table_id_example" > <thead>  <tr>   <th>Column 1</th>   <th>Column 2</th>  </tr> </thead> <tbody>  <tr>   <td>Row 1 Data 1</td>   <td>Row 1 Data 2</td>  </tr>  <tr>   <td>Row 2 Data 1</td>   <td>Row 2 Data 2</td>  </tr> </tbody></table>

    3、初始化Datatables

    $(document).ready( function () {	$('#table_id_example').DataTable();} );

    4、效果

    三、常用选项

    order

    应用于表的初始顺序（排序） stateSave

     # 参数1 列索引按顺序排列 从0开始 # 参数2 排序的规则 "order": [[ 1, "asc/desc" ],...]

    image-20210113163115794

    stateSave

    状态保存 - 页面重新加载时恢复表状态 启用或禁用状态保存。启用后，DataTables将存储状态信息，例如分 页位置，显示长度，过滤和排序。当最终用户重新加载页面时，表的状态将被更改以匹配他们之前设置的状 态。

    # 默认值 falsestateSave: true/false

    columnDefs

    设置列定义初始化属性 此参数允许您为表中的列指定特定选项，但在这种情况下，定义的列选项可应用于一 个或多个列

    "columnDefs":[ //索引第4列，不进行排序 {targets:[4],orderable:false}]

    image-20210113165722131

    lengthMenu

    定义在每页显示记录数的select中显示的选项

    $('#example').DataTable({	"lengthMenu": [ 10, 25, 50, 75, 100 ]});# 或$('#example').DataTable({	"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "所有"] ]});

    image-20210113170131037

    paging

    是否允许表格分页 true/false

    默认：true

    image-20210113170306117

    searching

    是否允许Datatables开启本地搜索 true/false

    默认：true

    image-20210113170350587

    ordering

    是否允许Datatables开启排序 true/false

    默认：true

    image-20210113170421382

    processing

    是否显示正在处理的状态 true/false

    默认：false

    四、Ajax使用远程数据

    有时从DOM读取数据太慢或太笨重，特别是在处理数千或数百万个数据行时。为了解决这个问题， DataTables的服务器端处理功能提供了一种方法，可以让服务器端的数据库引擎完成所有"繁重的工作" 。

    当使用服务器端处理时，DataTables将在页面上每次绘制信息时向服务器发出Ajax请求（即，在分页，排 序，搜索等时）。DataTables将向服务器发送许多变量，以允许它执行所需的处理，然后以DataTables所需 的格式返回数据。

    1、客户端

    $('#example').DataTable( { // 开启服务器模式 serverSide: true, // ajax发起请求 ajax: { // 请求地址 url: '/data-source', // 请求方式 get/post type: 'get', // 头信信息 laravel post请求时 csrf //headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' }, // 请求的参数 /* data: { 	"user_id": 451 }, */ /* // 两者写法效果一致 但是它用于搜索 data: function ( d ) {  d.user_id = $('#user_id').val(); } */ }, // columns要对tr中的td单元格中的内容进行数据填充 // 注意：如果data接收类似a或b的信息，实际服务器没有返回该信息，那么一定要同时设置 //defaultContent属性，否则报错 columns: [  // 总的数量与表格的列的数量一致，不多也不少  // 字段名称与sql查询出来的字段时要保持一致，就是服务器返回数据对应的字段名称  // defaultContent 和 className 可选参数  {'data':'字段名称1',"defaultContent": "默认值",'className':'类名'},  {'data':'字段名称n',"defaultContent": "默认值",'className':'类名'} ], /* 创建tr/td时的回调函数，可以继续修改、优化tr/td的显示，里边有遍历效果，会依次扫描生成的每个tr row:创建好的tr的dom对象 data:数据源，代表服务器端返回的每条记录的实体信息 dataIndex:数据源的索引号码 */ createdRow:function(row,data,dataIndex){}} );

    2、服务端

    /*draw: 客户端调用服务器端次数标识recordsTotal: 获取数据记录总条数recordsFiltered: 数据过滤后的总数量data: 获得的具体数据注意：recordsTotal和recordsFiltered都设置为记录的总条数*/$result = ['draw' => $request->get('draw'),'recordsTotal' => $count,'recordsFiltered' => $count,'data' => $data];return json_encode($result);

    3、搜索

    var table = $('#example').DataTable( {	ajax: "data.json"} );$('#search').on('click',function(){	table.api().ajax.reload();});

    4、实例

    以laravel为例

    服务器

    public function index(Request $request){  if ($request->ajax()){   //排序索引   $orderArr = $request->get('order')[0];   //排序索引   $column = $orderArr['column'];   //排序方式   $dir = $orderArr['dir'];   //排序字段   $orderColumn = $request->get('columns')[$column]['data'];   //开启位置   $start = $request->get('start',0);   //搜索关键字   $title = $request->get('title');   $query=Article::where('id','>',0);   if (!empty($title)){    $query->where('title','like',"%$title%");   }   //获取记录数   $length = min(100,$request->get('length',10));   $count = $query->count();   $articles = $query->orderBy($orderColumn,$dir)->offset($start)->limit($length)->get()->toArray();   /**    * draw:客户端调用服务端标识    * recordsTotal：获取数据记录总条数    * recordsFiltered：数据过滤后的总数量    * data：获取具体的数据    */   return [    'draw' => $request->get('draw'),    'recordsTotal' => $count,    'recordsFiltered'=>$count,    'data'=>$articles   ];  }  return view('admin.article.index'); }

    blade模板

    <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css"   href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css"></head><body><form onsubmit="return search()"> <input type="text" name="title" id="title" placeholder="请输入搜索关键字"> <input type="submit" value="搜索"></form><div > <table >  <thead>  <tr>   <th scope="col" colspan="7">文章列表</th>  </tr>  <tr >   <th>ID</th>   <th>文章标题</th>   <th>创建时间</th>   <th>更新时间</th>   <th>操作</th>  </tr>  </thead>  <tbody>  </tbody> </table></div></body><!-- jQuery --><script type="text/javascript" charset="utf8" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><!-- DataTables --><script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script><script type="text/javascript"> var table = $('.table-sort').DataTable({  "order": [[ 0, "desc" ]],  "columnDefs":[   {targets:[4],orderable:false}  ],  "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "所有"] ],  "processing" : true,  serverSide: true,  ajax: {   url: '',   type: 'get',   data:function (ret) {    ret.title = $('#title').val()   }  },  columns: [   {'data':'id'},   {'data':'title'},   {'data':'created_at'},   {'data':'updated_at'},   {'data':'updated_at'}  ],  createdRow:function(row,data,dataIndex){   var id = data.id;   var td = $(row).find('td:last-child');   var html = `<a>编辑</a>&nbsp;&nbsp;   <a >删除</a>`;   td.html(html)  } }); function search(){  table.ajax.reload();  return false; }</script></html>








    原文转载：http://www.shaoqun.com/a/508734.html

    跨境电商：https://www.ikjzd.com/

    grab：https://www.ikjzd.com/w/841

    欧麦：https://www.ikjzd.com/w/2085


    Datatables使用一、简介官网：https://datatables.net/中文官网javascript，Ajax和服务器处理支持不同主题DataTables,jQueryUI,Bootstrap,Foundation各式各样的扩展:Editor,TableTools,FixedColumns……丰富多样的option和强大的API支持国际化超过2900+个单元测试免费开源更多特性请到官网
    terapeak：terapeak
    naning9韩国官网：naning9韩国官网
    2020中秋节海南东山岭免费吗？万宁东山岭中秋节有什么优惠：2020中秋节海南东山岭免费吗？万宁东山岭中秋节有什么优惠
    北京旅游适合孩子玩的地方有哪些？：北京旅游适合孩子玩的地方有哪些？
    茂名五一好玩的地方？五一茂名冰雪游乐园适合孩子玩吗？：茂名五一好玩的地方？五一茂名冰雪游乐园适合孩子玩吗？
    发帖者 时间：

    没有评论:

    发表评论

    订阅： 博文评论 (Atom)