调用后台接口返回报错前端隐藏提示_DataTables学习：从最基本的入门静态页面，使用ajax调用Json本地数据源实现前端开发深入学习，根据后台数据接口替换掉本地的json本地数据，以及报错的处理...

一、DataTables

个人觉得学习一门新的插件或者技术时候，官方文档是最根本的，入门最快的地方，但是有时候看完官方文档，一步步的动手写例子，总会出现各种莫名其妙的错误，需要我们很好的进行研究出错的地方。

二、简单的例子

怎样简单地使用DataTables？使用下方简单的几行代码，一个方法初始化table。

$(document).ready(function(){

$('#myTable').DataTable();

});

开始使用DataTables很简单，只需要引入两个文件， 一个css样式文件和DataTables本身的脚本文件。在DataTables CDN上，可以使用下面这两个文件：

js文件     //cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js

css文件      //cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css

在你的项目中使用 DataTables，只需要引入三个文件即可，jQuery库，一个DT的核心js文件和一个DT的css文件， 完成以以下三步即可看到如下效果：

1、例子1：

(1)使用的是：Hbuilder

(2)项目结构：

(3)index.html代码

DataTables简单用例

$(document).ready(function() {

$('#example').DataTable();

});

NamePositionOfficeExtn.Start dateSalary

NamePositionOfficeExtn.Start dateSalary

(4)效果：

2、例子2:(PS：还是纯粹的前端静态页面)

(1)结构和工具见例子1

DataTables简单用例

$(document).ready(function() {

$('#example').DataTable();

});

NamePositionOfficeExtn.Start dateSalary

bob123123123123123JIM123123123123123Jack123123123123123qiao123123123123123NamePositionOfficeExtn.Start dateSalary

View Code

(2)效果：

说明：search的输入框是对所有属性的全部搜索，并显示搜索结果，最重要的是：这个搜索与表格进行了数据的双向绑定，可以实时进行更新。

重要：DataTables已经读取几乎任何JSON数据源，可以通过ajax.datatables读数据的能力已经从几乎任何JSON数据源可以通过Ajax读取数据的能力。

3、例子3:(PS：数据源是数组arrays)

(1)项目结构：(多了一个data的文件夹，文件夹里有一个arrays.txt文件，)

(2)arrays.txt内容

{

"data": [

[

"Tiger Nixon",

"System Architect",

"Edinburgh",

"5421",

"2011\/04\/25",

"$320,800"

],

[

"Garrett Winters",

"Accountant",

"Tokyo",

"8422",

"2011\/07\/25",

"$170,750"

],

[

"Ashton Cox",

"Junior Technical Author",

"San Francisco",

"1562",

"2009\/01\/12",

"$86,000"

],

[

"Cedric Kelly",

"Senior Javascript Developer",

"Edinburgh",

"6224",

"2012\/03\/29",

"$433,060"

],

[

"Airi Satou",

"Accountant",

"Tokyo",

"5407",

"2008\/11\/28",

"$162,700"

],

[

"Brielle Williamson",

"Integration Specialist",

"New York",

"4804",

"2012\/12\/02",

"$372,000"

],

[

"Herrod Chandler",

"Sales Assistant",

"San Francisco",

"9608",

"2012\/08\/06",

"$137,500"

],

[

"Rhona Davidson",

"Integration Specialist",

"Tokyo",

"6200",

"2010\/10\/14",

"$327,900"

],

[

"Colleen Hurst",

"Javascript Developer",

"San Francisco",

"2360",

"2009\/09\/15",

"$205,500"

],

[

"Sonya Frost",

"Software Engineer",

"Edinburgh",

"1667",

"2008\/12\/13",

"$103,600"

],

[

"Jena Gaines",

"Office Manager",

"London",

"3814",

"2008\/12\/19",

"$90,560"

],

[

"Quinn Flynn",

"Support Lead",

"Edinburgh",

"9497",

"2013\/03\/03",

"$342,000"

],

[

"Charde Marshall",

"Regional Director",

"San Francisco",

"6741",

"2008\/10\/16",

"$470,600"

],

[

"Haley Kennedy",

"Senior Marketing Designer",

"London",

"3597",

"2012\/12\/18",

"$313,500"

],

[

"Tatyana Fitzpatrick",

"Regional Director",

"London",

"1965",

"2010\/03\/17",

"$385,750"

],

[

"Michael Silva",

"Marketing Designer",

"London",

"1581",

"2012\/11\/27",

"$198,500"

],

[

"Paul Byrd",

"Chief Financial Officer (CFO)",

"New York",

"3059",

"2010\/06\/09",

"$725,000"

],

[

"Gloria Little",

"Systems Administrator",

"New York",

"1721",

"2009\/04\/10",

"$237,500"

],

[

"Bradley Greer",

"Software Engineer",

"London",

"2558",

"2012\/10\/13",

"$132,000"

],

[

"Dai Rios",

"Personnel Lead",

"Edinburgh",

"2290",

"2012\/09\/26",

"$217,500"

],

[

"Jenette Caldwell",

"Development Lead",

"New York",

"1937",

"2011\/09\/03",

"$345,000"

],

[

"Yuri Berry",

"Chief Marketing Officer (CMO)",

"New York",

"6154",

"2009\/06\/25",

"$675,000"

],

[

"Caesar Vance",

"Pre-Sales Support",

"New York",

"8330",

"2011\/12\/12",

"$106,450"

],

[

"Doris Wilder",

"Sales Assistant",

"Sidney",

"3023",

"2010\/09\/20",

"$85,600"

],

[

"Angelica Ramos",

"Chief Executive Officer