首页>>Jquery文字>>通过json加载表格数据,有支持排序和分页的效果(2014-08-26)

通过json加载表格数据,有支持排序和分页的效果

 请完整的查看代码，排序和分页放在后面

通过json加载表格数据,有支持排序和分页的效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="bs-example">  
  2.                    <table id="table-custom-sort" data-toggle="table" data-url="data1.json" data-height="246" data-sort-name="price" data-sort-order="desc">  
  3.                        <thead>  
  4.                        <tr>  
  5.                            <th data-field="id" data-align="right" data-sortable="true">Item ID</th>  
  6.                            <th data-field="name" data-align="center" data-sortable="true">Item Name</th>  
  7.                            <th data-field="price" data-sortable="true" data-sortable="true" data-sorter="priceSorter">Item Price</th>  
  8.                        </tr>  
  9.                        </thead>  
  10.                    </table>  
  11.                    <script>  
  12.                        function priceSorter(a, b) {  
  13.                            a = +a.substring(1); // remove $  
  14.                            b = +b.substring(1);  
  15.                            if (a > b) return 1;  
  16.                            if (a < b) return -1;  
  17.                            return 0;  
  18.                        }  
  19.                    </script>  
  20.                </div>  
  21.                <div class="highlight"><pre><code class="language-html"></code></pre></div>  

 data.json

 

XML/HTML Code
  1. [  
  2.     {  
  3.         "id": 0,  
  4.         "name": "test0",  
  5.         "price": "$0"  
  6.     },  
  7.     {  
  8.         "id": 1,  
  9.         "name": "test1",  
  10.         "price": "$1"  
  11.     },  
  12.     {  
  13.         "id": 2,  
  14.         "name": "test2",  
  15.         "price": "$2"  
  16.     },  
  17.     {  
  18.         "id": 3,  
  19.         "name": "test3",  
  20.         "price": "$3"  
  21.     },  
  22.     {  
  23.         "id": 4,  
  24.         "name": "test4",  
  25.         "price": "$4"  
  26.     },  
  27.     {  
  28.         "id": 5,  
  29.         "name": "test5",  
  30.         "price": "$5"  
  31.     },  
  32.     {  
  33.         "id": 6,  
  34.         "name": "test6",  
  35.         "price": "$6"  
  36.     },  
  37.     {  
  38.         "id": 7,  
  39.         "name": "test7",  
  40.         "price": "$7"  
  41.     },  
  42.     {  
  43.         "id": 8,  
  44.         "name": "test8",  
  45.         "price": "$8"  
  46.     },  
  47.     {  
  48.         "id": 9,  
  49.         "name": "test9",  
  50.         "price": "$9"  
  51.     },  
  52.     {  
  53.         "id": 10,  
  54.         "name": "test10",  
  55.         "price": "$10"  
  56.     },  
  57.     {  
  58.         "id": 11,  
  59.         "name": "test11",  
  60.         "price": "$11"  
  61.     },  
  62.     {  
  63.         "id": 12,  
  64.         "name": "test12",  
  65.         "price": "$12"  
  66.     },  
  67.     {  
  68.         "id": 13,  
  69.         "name": "test13",  
  70.         "price": "$13"  
  71.     },  
  72.     {  
  73.         "id": 14,  
  74.         "name": "test14",  
  75.         "price": "$14"  
  76.     },  
  77.     {  
  78.         "id": 15,  
  79.         "name": "test15",  
  80.         "price": "$15"  
  81.     },  
  82.     {  
  83.         "id": 16,  
  84.         "name": "test16",  
  85.         "price": "$16"  
  86.     },  
  87.     {  
  88.         "id": 17,  
  89.         "name": "test17",  
  90.         "price": "$17"  
  91.     },  
  92.     {  
  93.         "id": 18,  
  94.         "name": "test18",  
  95.         "price": "$18"  
  96.     },  
  97.     {  
  98.         "id": 19,  
  99.         "name": "test19",  
  100.         "price": "$19"  
  101.     },  
  102.     {  
  103.         "id": 20,  
  104.         "name": "test20",  
  105.         "price": "$20"  
  106.     }  
  107. ]  

 


原文地址:http://www.freejs.net/article_jquerywenzi_417.html