table/5.html at master · L30Yu/table · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/bootstrap-table/src/bootstrap-table.css">
    <link rel="stylesheet" href="assets/bootstrap-editable.css">
    <link rel="stylesheet" href="assets/address.css">

    <script src="assets/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/bootstrap-table/src/bootstrap-table.js"></script>
    <script src="assets/bootstrap-editable.js"></script>
    <script src="assets/bootstrap-table-export.js"></script>
    <script src="assets/bootstrap-table-editable.js"></script>
    <script src="assets/FileSaver.min.js"></script>
    <script src="assets/jspdf.min.js"></script>
    <script src="assets/jspdf.plugin.autotable.js"></script>
    <script src="assets/tableExport.js"></script>
    <script src="assets/address.js"></script>


    <style>
        .row-index {
            width: 50px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="alert alert-success" id="eventsResult">
    Here is the result of event.
</div>
<table id="table"
       data-search="true"
       data-show-refresh="true"
       data-show-columns="true"
       data-toolbar="#toolbar"
       data-show-export="true"
       data-export-types="['excel', 'pdf']"
       data-export-options='{
         "fileName": "testo",
         "worksheetName": "test1",
         "jspdf": {
           "autotable": {
             "styles": { "rowHeight": 20, "fontSize": 10 },
             "headerStyles": { "fillColor": 255, "textColor": 0 },
             "alternateRowStyles": { "fillColor": [60, 69, 79], "textColor": 255 }
           }
         }
       }'

       data-query-params="queryParams"
       data-pagination="true"
       data-height="500">

</table>
<script>
 $(function () {
    $('#table').bootstrapTable({
        idField: 'name',
        url: 'https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1',
        columns: [{
            field: 'name',
            title: 'Name'
        }, {
            field: 'stargazers_count',
            title: 'Stars',
            editable: {
                type: 'text'
            }
        }, {
            field: 'forks_count',
            title: 'Forks',
            editable: {
                type: 'text'
            }
        }, {
            field: 'forks_count',
            title: 'Address',
            editable: {
                type: 'address',
                display: function(value) {
                  if(!value) {
                    $(this).empty();
                    return;
                  }
                  var html = '<b>' + $('<div>').text(value.city).html() + '</b>, ' + $('<div>').text(value.street).html() + ' st., bld. ' + $('<div>').text(value.building).html();
                  $(this).html(html);
                }
            }
        },{
            field: 'description',
            title: 'Description',
            editable: {
                type: 'textarea'
            }
        }]
    });
});

 function queryParams() {
    return {
        type: 'owner',
        sort: 'updated',
        direction: 'desc',
        per_page: 100,
        page: 1
    };
}
</script>
</body>
</html>