使用のDataTableのフロントエンドプラグイン - パートII

私たちは、最初にその利益の必要があります

記事のこのシリーズは、私はシステム開発プロセスの運用・保守に使用されるもの便利なフロントエンドプラグインを記述し、記事では紹介のDataTableのプラグインの前の1の続きとして、この記事の基本的な使用、およびシニアデータベースの数を紹介しますこのようドムがページ機能を変更操作し、最終プレゼンテーションのデータを変更、データの異なるソースからデータを取得としての使用、オープンサーバのデータ処理

積載

前記事のテーブルのすべてのデータを直接HTMLにレンダリングされる、のDataTableは、より柔軟な制御の達成を容易にするために、いくつかの他のデータソースをサポート

配列から取得

<table id="myTable-x" class="display" style="width:100%"></table>

$(document).ready(function() {
    var dataSet = [
      ["3","https://ops-coffee.cn","2018-07-03"],
      ["9","https://demo.ops-coffee.cn", "2019-08-06"],
    ];

    $('#myTable-x').DataTable({
        "data": dataSet,
        "columns": [
          { title: "Id" },
          { title: "Site" },
          { title: "Date" },
        ]
    })
});

データ：指定された配列

コラム：各列の設定タイトル

注：次に、以下のエラーを報告することがない場合はデータ取得は、アレイからヘッダを有していなければなりません。

Uncaught TypeError: Cannot read property 'aDataSort' of undefined

解決策は、DataTableの追加することでcolumns設定を、またはテーブルのTHEADに書きます

<table id="myTable-x" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Site</th>
            <th>Date</th>
        </tr>
    </thead>
</table>

オブジェクトから取得

<table id="myTable-x" class="display" style="width:100%"></table>

$(document).ready(function() {
    var dataSet = [
      {"Id":"3","Site":"https://ops-coffee.cn","Date":"2018-07-03"},
      {"Id":"9","Site":"https://demo.ops-coffee.cn","Date":"2019-08-06"},
    ];

    $('#myTable-x').DataTable({
        "data": dataSet,
        "columns": [
          {"data": "Id", "title": "Id"},
          {"data": "Site", "title": "Site"},
          {"data": "Date", "title": "Date"},
        ]
    })
});

列に設定する必要があり、オブジェクトの配列を使用しdata、各列のための属性を対応のDataTable伝えるtitleテーブルヘッダを追加するタイトルを追加し、設定オプションを

例から得られ

$(document).ready(function() {
    function dataSet(id, site, date) {
      this.id = id;
      this.site = site;
      this.date = date;
    };

    $('#myTable-x').dataTable({
      data: [
        new dataSet("3", "https://ops-coffee.cn", "2018-07-03"),
        new dataSet("9", "https://demo.ops-coffee.cn", "2019-08-06"),
      ],
      columns: [
          {"data": "id", "title":"Id"},
          {"data": "site", "title":"Site"},
          {"data": "date", "title":"Date"}
      ]
    });
});

Ajaxの非同期取得

DataTableは、データをロードするための非同期Ajaxの方法をサポートし、簡単な方法は、直接にURLアドレスを設定することです

$(document).ready(function() {
    $('#myTable-x').dataTable({
        "ajax": 'sdata.json'
    });
});

AJAXは、データが注意、アレイまたはオブジェクトであってもよい受信columns構成は前処理されたデータを参照して説明した2つのフォーマットに対応することができます

データ処理の結果

表のトップサイト列の内容で見つけることができるURLがあり、どのように我々はそれを達成するためのURLをクリックすることができるようにしたい場合は？あなたは使用することができ、結果を表示するように変更を加えるために財産をcolumnsrender

$(document).ready(function() {
    $('#myTable-x').dataTable({
        "ajax": 'sdata.json',
        "columns": [
            {"data": "id", "title":"Id"},
            {
                "data": "site", 
                "title":"Site",
                "render": function (data, type, row) {
                  return '<a href='+data+' target="_blank">'+data+'</a>'
                }
            },
            {"data": "date", "title":"Date"}
        ]
    });
});

背後にある機能は、データの列のセル取得する必要があるときはいつでも、データテーブルレンダリング続くrender関数が実行され、関数は、3つのパラメータのデフォルト機能を複数回実行することができる、すなわち、平均：

データ：特定のデータセル、例えばhttps://ops-coffee.cn

タイプ：最初の呼び出しは、あるでしょう、要求の種類を識別しfilter、display、type、sort

行： Demoサンプルデータとして渡されたオブジェクトは、あなたが渡すことができれば、データソースの行を完了しrow.site、サイト列の行を取得するには、データを

処理パラメータのシリーズができます取得した後return、最終的に返されるコンテンツを表示したいです

もちろん、によってcolumns編集を達成するために列を追加するには、テーブルの最後に、ボタン表示を削除

"columns": [
    {"data": "id", "title":"Id"},
    {
        "data": "site", 
        "title":"Site",
        "render": function (data, type, row) {
          return '<a href='+data+' target="_blank">'+data+'</a>'
        }
    },  
    {"data": "date", "title":"Date"},
    {   
      "data": "id",
      "title": "操作",
      "render": function (data, type, row) {
        return '<a href="#update/'+row.id+'/" class="btn btn-warning btn-sm">编辑</a> ' +
               '<a href="#delete/'+row.id+'/" class="btn btn-danger btn-sm">删除</a>'
      } 
    }   
]

最終結果は、次の図に示されています

DOM操作

私は、DataTableのを必要としない場合はページの左上隅には、情報の数を示しており、それを行う方法に変更するためのボタンを追加するには？ここでは、DOMのDataTableの手段によって達成することができます

デフォルトでは、テーブルには、ページの左上隅にはピースの数を示してい右上、テーブル情報の左下隅を検索、ページの右下隅、テーブルの真ん中、自身をロードするためのデータを待ちます、これらはDataTableのDOMあり、実際には彼らdiv要素を選択し、入力などのHTMLタグに包まれて、DOMのそれぞれは、DataTableのある次のように彼らの対応がある、文字に対応します：

L：長さ、コントロールの数を示し、ページの左上隅を表します。

F：フィルタリングは、検索コントロールの右上隅を表し、

T：表、表自体を表します

I：情報、フォーム情報制御の左下隅に代わって、

P：改ページの右下隅、ページングコントロールの代わりに

R：処理は、プロンプトコントロールをロードするデータを待って真ん中を表します

这些控件在datatables里可以通过配置dom来控制他们的显示位置，以及是否显示，默认的显示顺序是lfrtip

$('#myTable-x').dataTable({
    "dom": 'lfrtip'
})

你如果不想显示某个控件，可以通过去掉dom配置项里对应的字母实现，同时Datatables支持四个自定义的标签，通过这四个标签可以方便的来修改DOM的展示

< > 尖括号就代表html里的div

<"class"> 代表了添加了class的div

<"#id"> 代表了添加了id的div

<"#id.class"> 代表添加了id和class的div

我们想把右上角的每页显示条数控件换成添加按钮的话可以这样写

$('#myTable-x').dataTable({
    "dom": '<"#add-btn.toolbar">frtip'
})

$("#add-btn.toolbar").html(
  '<button href="#add" class="btn btn-success btn-sm"> + 添加</button>'
)

遇到样式问题，需要添加css

<style type="text/css">
  .toolbar {float:left}
</style>

这样就完美实现了

服务器端处理

Datatables支持使用服务端进行数据处理，当开启服务端数据处理后，Datatables将在页面执行分页、排序、搜索等操作时向服务端发出Ajax请求，Ajax请求会传递许多变量给服务端，服务端接收到请求后根据变量的值对数据进行处理，处理完成按照固定的格式返回给前端页面，页面对返回的数据进行渲染提供给用户查看

开启服务器模式只需要两个设置项serverSide和ajax

$('#myTable-x').dataTable({
    "serverSide": true,
    "processing": true,
    "ajax": '/api/site/data'
})

serverSide： 为true时表示开启服务端处理模式

processing： 为true时会开启数据处理中的提示，非必须

ajax： 指定服务器端的地址，可以像上边一样是个字符串，也可以像jQuery.ajax一样作为一个对象使用，例如我想传递额外的参数（datatables默认会给后端传递许多的参数，下边有讲）给后端服务器的话，可以这样用

$('#myTable-x').dataTable({
    "serverSide": true,
    "processing": true,
    "ajax": {
        "url": "/api/site/data",
        "data": function (d) {
            d.type = 'ops-coffee';
        }
    }
})

data： 可以在发送请求给后端时额外增加type=ops-coffee的参数

发送到服务器端的参数

当开启服务端数据处理后，默认会给服务端传递许多参数，大概如下：

draw：绘制计数器，主要用来确保Ajax从服务器端接收到的数据是对应同一次请求的
start：第一条数据的起始位置
length：每页显示的条数
search[value]：全局的检索关键字
order[i][column]：告诉服务器哪些列是需要排序的，i为排序列的序号，下边的i相同含义，注意i是从0开始的
order[i][dir]：告诉服务器排序的方式"desc","asc"
columns[i][data]：columns上定义的data属性值
columns[i][name]：columns上定义的name属性值
columns[i][searchable]：告诉服务器哪些列可以被搜索
columns[i][orderable]：告诉服务器哪些列可以进行排序
columns[i][search][value]：告诉服务器某些列的具体搜索条件

如果需要后台分页，那么需要拿到start、length两个参数做相应的处理，

如果有搜索的内容，那么需要拿到serch[value]参数做处理

服务端返回数据的格式

服务端需要返回datatables可以处理的数据格式，具体数据格式如下：

{
    "draw": 1,
    "recordsTotal": 7,
    "recordsFiltered": 7,
    "data": [
        {
            "id": 3,
            "site": "https://ops-coffee.cn",
            "date": "2018-07-03"
        },
        {
            "id": 9,
            "site": "https://demo.ops-coffee.cn",
            "date": "2019-08-06"
        }
        // 省略其他结果
    ]
}

draw： 客户端调用服务端次数标识，客户端传过来是什么原样返回回去即可，无需修改

recordsTotal： 数据总条数，没有过滤的数据总条数

recordsFiltered： 过滤后符合要求的条数，如果没有搜索参数那么这个值与recordsTotal一致

data： 需要显示的具体数据，json格式

API调用

Datatables提供了强大的API来处理表格上的数据，可以通过API添加数据到已经存在的表格，或者对已经存在的数据进行操作，API的类型非常丰富，详细的信息可以查阅官网，使用方法如下：

跳转到页

跳转到第3页：

var table = $('#myTable').DataTable()

table.page(2).draw(false)

page(2)： page为分页方法，后边的2表示跳转到第几页，可以是一个数字，也可以是first、next、previous、last这样的字符串，当为数字时要从0算起，例如示例中为2实际上是跳转到了第3页

draw(false)： 对表格进行重绘以实现表格更新的显示，大多数的api操作都不会直接更新在页面上，所以需要调用下draw，默认情况下重绘后分页会被重置回到第一页，当设置为false时分页不会被重置

搜索某列

搜索第2列包含https://ops-coffee.cn的行

var tablx = $('#myTable').dataTable()

tablx.api().column(1).search('https://ops-coffee.cn').draw()

首先需要注意这个例子中的API调用使用了.api()，这是因为上一个例子在初始化时用了.DataTable()而这个例子初始化时用了.dataTable()，仅仅是d字母大小写的区别而已，但意义确不同，前者直接返回API实例，后者返回的是jQuery实例

完整Demo

为了方便大家学习，我写了个完整的demo，你可以在线查看效果或下载代码应用到自己的项目中

在线Demo地址：https://demo.ops-coffee.cn/datatables/

Github源码地址：https://github.com/ops-coffee/demo/tree/master/datatables

扫码关注公众号查看更多实用文章