Skip to content

Instantly share code, notes, and snippets.

@CesarBalzer

CesarBalzer/example_dt_f7.txt

Last active March 16, 2020 12:12
Show Gist options
  • Save CesarBalzer/2866067fd9a2661c1395da88fee61f48 to your computer and use it in GitHub Desktop.
Save CesarBalzer/2866067fd9a2661c1395da88fee61f48 to your computer and use it in GitHub Desktop.
Download ZIP
Example my structure with Datatables.net/Framework7
Raw
example_dt_f7.txt
VERSION FRAMEWORK7 v4
//Structure INDEX.HTML
-----------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
<title>GFácil</title>
<link rel="stylesheet" href="css/framework7.bundle.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="datatables/css/dataTables.materialize.css" media="screen">
<link rel="stylesheet" type="text/css" href="datatables/ext/Responsive/css/responsive.bootstrap.css" media="screen"/>
<link rel="apple-touch-icon" href="img/logo-icon-square.png">
<link rel="icon" href="img/logo-icon.png">
</head>
<body class="" onload="onLoad();">
<div id="app">
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar"></div>
<!-- Left panel with cover effect-->
<div class="panel panel-left panel-cover">
<div class="page">
<div class="page-content">
</div>
</div>
<!-- Right panel with reveal effect-->
<div class="panel panel-right panel-reveal theme-dark">
<div class="view">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Right Panel</div>
</div>
</div>
<div class="page-content">
<div class="block">Right panel content goes here</div>
</div>
</div>
</div>
</div>
<!-- Your main view, should have "view-main" class -->
<div class="view view-main view-init safe-areas" data-url="/"></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/framework7.bundle.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/routes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="datatables/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="datatables/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="datatables/ext/Responsive/js/dataTables.responsive.js"></script>
<script type="text/javascript" src="datatables/ext/Responsive/js/responsive.bootstrap.js"></script>
<script type="text/javascript" src="datatables/ext/Buttons/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="datatables/ext/JSZip/jszip.min.js"></script>
<script type="text/javascript" src="datatables/ext/Buttons/js/buttons.html5.js"></script>
</body>
</html>
-----------------------------------
//How call datatables
//as i'm using inside the app, the best way i found was to add using the datatables' native functions, so i created a specific method for that
// Routes
{
path: '/list/',
name: '/list/',
async: function (routeTo, routeFrom, resolve, reject) {
resolve({
componentUrl: './pages/list.html'
}, {context: {
}});
},
on: {
pageBeforeIn: function (event, page) {
dt_init();
}
}
},
-----------------------------------
// list.html
//Is page where rendered datatable
<template>
<div class="page" data-name="cliente-listar">
<!-- Top Navbar -->
<div class="navbar navbar-transparent no-hairline no-shadow">
<div class="navbar-inner sliding">
<div class="left">
<a href="/" class="link">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Table example</div>
</div>
</div>
<!-- Scrollable page content-->
<div class="page-content">
<div class="block block-app">
<div class="separator5"></div>
<table class="table dataTable" id="my_table" width="100%">
</table>
<div class="separator10">&nbsp;</div>
</div>
</div>
</template>
<script>
return{
}
</script>
//END PAGE
----------------------------------
//In my function file js
function getData() {
var dt;
var def = $.Deferred();
myapp.request( {
url: URL_CALL + "/list",
method: 'POST',
contentType: 'application/json',
headers: {
'Authorization': 'Bearer' + myapp.data.token
},
success: function ( data ) {
console.log( data );
dt = { "data": data };
def.resolve( dt );
},
error: function ( xhr, status ) {
console.log( xhr );
},
timeout: 30000
} );
return def.promise();
}
function dt_init() {
getData().done( function ( dataset ) {
var table = $( '#my_table' ).DataTable( {
language: datatablesConfig.language,
deferRender: true,
data: $.map( dataset, function ( value, key ) {
return value;
} ),
"initComplete": function ( settings, json ) {
myapp.preloader.hide();
},
columns: [
{ data: "cod", title: "Cod", responsivePriority: 1, "searchable": true },
{ data: "name", title: "Name", responsivePriority: 2, "searchable": true }
],
order: [ 0, 'desc' ],
"fixedHeader": true,
"responsive": true,
//my custom
"dom":
"<'row'<'col-30'l><'col-70'f>>" +
"<' '<'col'tr>>" +
"<'row'<'col'i>>" +
"<'row'<'separator10'>>" +
"<'row'<'col'p>>",
"lengthMenu": [ [ 10, 25, 50, 100, 250, 500, -1 ], [ 10, 25, 50, 100, 250, 500, "All" ] ],
"processing": true,
"destroy": true
} );
} );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment