Skip to content

Instantly share code, notes, and snippets.

@jsanch

jsanch/Catalog in Perspectives

Last active October 26, 2016 19:28
Show Gist options
  • Save jsanch/bce1f3c2f04e7dac021db34a769e907f to your computer and use it in GitHub Desktop.
Save jsanch/bce1f3c2f04e7dac021db34a769e907f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Catalog in Perspectives
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script type="text/javascript" src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<!-- Export -->
<script src="https://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>
<script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<!-- Fixed Columns -->
<!-- <link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table-fixed-columns/master/bootstrap-table-fixed-columns.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table-fixed-columns/master/bootstrap-table-fixed-columns.js"></script> -->
<!-- Key Events -->
<script src="https://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/extensions/key-events/bootstrap-table-key-events.js"></script>
<!-- Mobile -->
<script src="https://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/extensions/mobile/bootstrap-table-mobile.js"></script>
<!-- Resizable -->
<script src="https://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/extensions/resizable/bootstrap-table-resizable.js"></script>
<script src="https://rawgit.com/wenzhixin/colResizable/master/source/colResizable-1.5.source.js"></script>
<script src="https://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/extensions/filter-control/bootstrap-table-filter-control.js"></script>
<title>Bootstrap Table</title>
</head>
<body>
<!-- <table id="table" data-search="true" data-pagination="true" data-show-toggle="true" data-show-toggle="true" ></table> -->
<!-- <table id="table" data-pagination="true" data-card-view="true" data-show-toggle="true" data-search="true" data-sort-class="sortthis" data-toggle="table" data-query-params="false" data-sortable="true" data-height="600" ></table> -->
<table id="table"
data-mobile-responsive="false"
data-show-columns="true"
data-pagination="true"
data-show-toggle="true"
data-show-export="true"
data-search="true"
data-sort-class="sortthis"
data-toggle="loadFromJS"
data-query-params="false"
data-show-pagination-switch="true"
data-sortable="true"
data-page-size="10"
data-resizable="false"
data-filter-control="true"
data-filter-show-clear="true"
></table>
<script type="text/javascript">
function urlFormatter(value, row) {
return '<a target="_blank" href='+row.link+' >' + value + '</a>';
}
var data = '';
$.getJSON("https://api.us.socrata.com/api/catalog/v1?&only=stories",function(d){
data = d.results
console.log(data);
$('#table').bootstrapTable({
columns: [{
field: 'resource.name',
title: 'Name',
formatter: urlFormatter,
sortable:"true"
}, {
field: 'resource.description',
title: 'Description'
},{
field: 'resource.view_count.page_views_total',
title: 'Total Page Views',
sortable:"true"
}],
data:data
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment