简单知识点实例之三：Bootstrap-Table和后台进行百分百交互的简单实例

这是一个针对前后台交互的例子，可以直接套进项目中通畅运行。第二页之所以数据不对，是因为例子毕竟没有真正的后台，所以数据不对。但是可以套入项目中，就正常了。

重点：

1. 其中bootstrap-table有一个search:truse搜索框的参数我没有使用，而是自己写了一个搜索框，因为那个参数只针对client（客户端数据才有效果，因为客户端数据得到了所有的数据了，但是例子是和后台交互的server服务端例子）
2. sidePagination:'server'和‘client’区别在于前者是服务端交互数据，后者是客户端得到所有数据后自行进行分页和搜索
3. responseHandler是处理前期后台传给表格的数据字段的绑定的函数
   
4. queryParams是处理一系列操作（如分页、搜索、刷新等）后，发送给后台处理数据的函数
   
5. 后台传递过来的数据最好是以以下格式：

   {
     "total":20,
      "offset":1,
      "limit":10,
     "rows"[
      {
         "id": 0,
         "name": "Item 0"
       },{
         "id": 1,
         "name": "Item 1"
       } 
     ],
   }

一、准备json数据存入url/bootstrapTable.json中

{
  "total": 12,
  "offset":1,
  "limit":10,
  "data": [
    {
      "id": 0,
      "name": "Item 0",
      "datetime": 1372751992000
    },{
      "id": 1,
      "name": "Item 1",
      "datetime": 1372751992000
    },{
      "id": 2,
      "name": "Item 2",
      "datetime": 1372751992000
    },{
      "id": 3,
      "name": "Item 3",
      "datetime": 1372751992000
    },{
      "id": 4,
      "name": "Item 4",
      "datetime": 1372751992000
    },{
      "id": 5,
      "name": "Item 5",
      "datetime": 1372751992000
    },{
      "id": 6,
      "name": "Item 6",
      "datetime": 1372751992000
    },{
      "id": 7,
      "name": "Item 7",
      "datetime": 1372751992000
    },{
      "id": 8,
      "name": "Item 8",
      "datetime": 1372751992000
    },{
      "id": 9,
      "name": "Item 9",
      "datetime": 1372751992000
    },{
      "id": 10,
      "name": "Item 10",
      "datetime": 1372751992000
    },{
      "id": 11,
      "name": "Item 11",
      "datetime": 1372751992000
    }
  ]
}

二、具体代码：里面有详细注解

    
    
    
    
    
    
    
    
    
    


   

        

            

                搜索名称
                
            
            搜索
        
    
    

三、具体界面

四、具体代码下载：（要用webstrom运行才可看到数据）

http://download.csdn.net/download/miss_ll/10204235