Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e766b3b
commit ef4dcb5
Showing
9 changed files
with
270 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| <html> | ||
| <head> | ||
| <title>Open DataTable Simle Example</title> | ||
| <meta name="description" content="Open DataTable is a JQuery plug-in. It is fast, very much realiable, easy to implement, highly flexible and comes with a very beautiful UI.It is currently avaiblable only with PHP MySQL data source and under development for supporting other data sources in near future"> | ||
| <meta name="keyword" content="JQuery data table, Php data table, simple data table"> | ||
| <meta http-equiv="content-type" content="text/html;charset=utf-8" /> | ||
|
|
||
| <!-- <script src="https://code.jquery.com/jquery-2.2.4.js"></script> --> | ||
| <script src="../js/jquery-2.0.3.min.js"></script> | ||
|
|
||
| <link rel="stylesheet" type="text/css" href="../css/style.css"> | ||
| <script src="../js/OpenDataTable.js"></script> | ||
| <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> | ||
| <script type="text/javascript" src="../js/prism.js"></script> | ||
| <link href="../css/prism.css" rel="stylesheet"> | ||
| <script type="text/javascript"> | ||
| $(document).ready(function(){ | ||
| $(".OpenDataTable").OpenDataTable({ | ||
| url:"../source/simple_php_datasource.php", | ||
| }); | ||
| }); | ||
| </script> | ||
| <script> | ||
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | ||
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | ||
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | ||
| })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); | ||
|
|
||
| ga('create', 'UA-98093724-1', 'auto'); | ||
| ga('send', 'pageview'); | ||
|
|
||
| </script> | ||
| </head> | ||
| <body> | ||
| <h1 class="logo"> <a href="http://opendatatable.com/"> <span class="logo1">Open</span> DataTable</a></h1> | ||
| <h2>Simple Example</h2> | ||
| <p><b>Required files</b><br> | ||
| <a href="https://code.jquery.com/jquery-2.2.4.js">jquery-2.2.4.js</a><br> | ||
| <a href="https://github.com/opendatatable/OpenDataTable/blob/master/source/simple_php_datasource.php">simple_php_datasource.php</a><br> | ||
| <a href="https://github.com/opendatatable/OpenDataTable/blob/master/css/style.css">style.css</a><br> | ||
| <a href="https://github.com/opendatatable/OpenDataTable/blob/master/js/OpenDataTable.js">OpenDataTable.js</a><br> | ||
| <a href="https://github.com/opendatatable/OpenDataTable/blob/master/country_city.sql">country_city.sql</a><br> | ||
| </p> | ||
| <b>Code</b> <br> | ||
| some time we required to distroy the data to load new data for that perpose call this function where you want to laod a new data.<b><code class="language-JavaScript"> $(".OpenDataTable").ODTDestroy();</code> </b> | ||
| <pre class="language-markup"> | ||
| <code class="language-markup"> | ||
| <html> | ||
| <head> | ||
| <title>Open Data Table</title> | ||
| <script src="https://code.jquery.com/jquery-2.2.4.js"></script> | ||
| <link rel="stylesheet" type="text/css" href="style.css"> | ||
| <script src="OpenDataTable.js"></script> | ||
| <script type="text/javascript"> | ||
| $(document).ready(function(){ | ||
| $(".OpenDataTable").OpenDataTable({ | ||
| url:"simple_php_datasource.php", | ||
| }); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <a href="#" class="link">click here to destroy table</a> | ||
| <table class="OpenDataTable"> | ||
| <thead> | ||
| <tr> | ||
| <th>Code</th> | ||
| <th>Name</th> | ||
| <th>Continent</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody></tbody> | ||
| </table> | ||
| <script type="text/javascript"> | ||
| $('.link').click(function(){ | ||
| $(".OpenDataTable").ODTDestroy(); | ||
| $(".OpenDataTable").OpenDataTable({ | ||
| url:"../source/simple_php_datasource.php", | ||
| }) | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
||
| </code></pre> | ||
| <p><b>Output</b></p> | ||
|
|
||
| <a href="#" class="link">click here to destroy table</a> | ||
| <table class="OpenDataTable"> | ||
| <thead> | ||
| <tr> | ||
| <th>Code</th> | ||
| <th>Name</th> | ||
| <th>Continent</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody></tbody> | ||
| </table> | ||
| <script type="text/javascript"> | ||
| $('.link').click(function(){ | ||
| $(".OpenDataTable").ODTDestroy(); | ||
|
|
||
| $(".OpenDataTable").OpenDataTable({ | ||
| url:"../source/simple_php_datasource.php", | ||
| }); | ||
| }); | ||
|
|
||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| <html> | ||
| <head> | ||
| <title>Open DataTable Hide Colume</title> | ||
| <meta name="description" content="Open DataTable is a JQuery plug-in. It is fast, very much realiable, easy to implement, highly flexible and comes with a very beautiful UI.It is currently avaiblable only with PHP MySQL data source and under development for supporting other data sources in near future"> | ||
| <meta name="keyword" content="JQuery data table, Php data table, simple data table"> | ||
| <meta http-equiv="content-type" content="text/html;charset=utf-8" /> | ||
|
|
||
| <!-- <script src="https://code.jquery.com/jquery-2.2.4.js"></script> --> | ||
| <script src="../js/jquery-2.0.3.min.js"></script> | ||
|
|
||
| <link rel="stylesheet" type="text/css" href="../css/style.css"> | ||
| <script src="../js/OpenDataTable.js"></script> | ||
| <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> | ||
| <script type="text/javascript" src="../js/prism.js"></script> | ||
| <link href="../css/prism.css" rel="stylesheet"> | ||
| <script type="text/javascript"> | ||
| $(document).ready(function(){ | ||
| $(".OpenDataTable").OpenDataTable({ | ||
| url:"../source/simple_php_datasource.php", | ||
| }); | ||
| }); | ||
| </script> | ||
| <script> | ||
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | ||
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | ||
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | ||
| })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); | ||
|
|
||
| ga('create', 'UA-98093724-1', 'auto'); | ||
| ga('send', 'pageview'); | ||
|
|
||
| </script> | ||
| </head> | ||
| <body> | ||
| <h1 class="logo"> <a href="http://opendatatable.com/"> <span class="logo1">Open</span> DataTable</a></h1> | ||
| <h2>Hide Colume Example</h2> | ||
| <p><b>Required files</b><br> | ||
| <a href="https://code.jquery.com/jquery-2.2.4.js">jquery-2.2.4.js</a><br> | ||
| <a href="https://github.com/opendatatable/OpenDataTable/blob/master/source/simple_php_datasource.php">simple_php_datasource.php</a><br> | ||
| <a href="https://github.com/opendatatable/OpenDataTable/blob/master/css/style.css">style.css</a><br> | ||
| <a href="https://github.com/opendatatable/OpenDataTable/blob/master/js/OpenDataTable.js">OpenDataTable.js</a><br> | ||
| <a href="https://github.com/opendatatable/OpenDataTable/blob/master/country_city.sql">country_city.sql</a><br> | ||
| </p> | ||
| <b>Code</b><br> | ||
| Simply add <b><code class="language-JavaScript"> data-colhide="yes"</code></b> to <th> hide any column | ||
| <pre class="language-markup"> | ||
| <code class="language-markup"> | ||
| <html> | ||
| <head> | ||
| <title>Open Data Table</title> | ||
| <script src="https://code.jquery.com/jquery-2.2.4.js"></script> | ||
| <link rel="stylesheet" type="text/css" href="style.css"> | ||
| <script src="OpenDataTable.js"></script> | ||
| <script type="text/javascript"> | ||
| $(document).ready(function(){ | ||
| $(".OpenDataTable").OpenDataTable({ | ||
| url:"simple_php_datasource.php", | ||
| }); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <table class="OpenDataTable"> | ||
| <thead> | ||
| <tr> | ||
| <th data-colhide="yes" >Code</th> | ||
| <th>Name</th> | ||
| <th>Continent</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody></tbody> | ||
| </table> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
||
| </code></pre> | ||
| <p><b>Output</b></p> | ||
| <table class="OpenDataTable"> | ||
| <thead> | ||
| <tr> | ||
| <th data-colhide="yes" >Code</th> | ||
| <th>Name</th> | ||
| <th>Continent</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody></tbody> | ||
| </table> | ||
| </body> | ||
| </html> |
Oops, something went wrong.