bootstraptable学习(1)数据展示

最近工作用到bootstraptable,并且一些功能需要很了解这个插件,那么我们便来看看这个东西

1.css与js的引入,顺序肯定是有讲究的,在这里不细说了

2.数据的引入与呈现,我们来看一下官网的例子,用 $('#tableModel').bootstrapTable({})这种语句来为配置table的信息,它的打data可以自己定义,好像是一个数组,再用 columns属性做到渲染

  <table id="tableModel"></table>

    <script>
       $('#tableModel').bootstrapTable({
     columns: [{
         field: 'id',
         title: 'Item ID'
     }, {
         field: 'name',
         title: 'Item Name'
     }, {
         field: 'price',
         title: 'Item Price'
     }],
     data: [{
         id: 1,
         name: 'Item 1',
         price: '$1'
     }, {
         id: 2,
         name: '商品2',
         price: '$2'
     }]
 });
   </script>

3.data-toggle="table",自己直接写table

 <table data-toggle="table">
     <thead>
         <tr>
             <th>Item ID</th>
             <th>Item Name</th>
             <th>Item Price</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>1</td>
             <td>Item 1</td>
             <td>$1</td>
         </tr>
         <tr>
             <td>2</td>
             <td>Item 2</td>
             <td>$2</td>
         </tr>
     </tbody>
 </table>

4.现在我们从后台获取数据,通过实验我发现如果从后台直接返回一个list前台是无法展示的,所以我将后台的list序列化成json对象,field为实体类里的字段的名称

  context.Response.ContentType = "text/plain";
             var productList = repo.Products.ToList();
            var productListJson =  JsonConvert.SerializeObject(productList);
             context.Response.Write(productListJson);

 function init() {
     $('#bootstrapModel').bootstrapTable({
         url: "../Listing.ashx",
         method: 'post',
         columns: [
             {
             field: 'ProductID',
             title: '编号'
         }, {
            field: 'Name',
            title: '产品名称'
         }, {
            field: 'Description',
            title: '描述'
         }, {
            field: 'Price',
             title: '价格'
         }

         ]
     });

 }