| <!doctype html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>jquery.datatables Plugins </title>
<link rel= "stylesheet" href= "Bootstrap3/dist/css/bootstrap.min.css"/>
<script src= "Plugins/jquery/jquery-1.10.1.min.js" ></script>
<script src= "Plugins/datatables/jquery.datatables.js" ></script>
<script src= "Plugins/datatables/dt_bootstrap.js" ></script>
<script>
$ (function () {
$ ("#sample_1"). DataTable ({
' Bpaginate ': true,//switch, Show page splitter
' Binfo ': true,//switch, show some information about the table
' Bfilter ': true,//switch, whether client filters are enabled
"Sdom": "<>lfrtip<>",
"Bautowith": false,
"Bdeferrender": false,
"Bjqueryui": false,//switch, whether jQueryUI style is enabled
' Blengthchange ': true,//toggle, whether to display a drop-down box of the size of each page
"Bprocessing": true,
"Bscrollinfinite": false,
"sscrolly": "800px",//whether to turn on vertical scrolling, and specify the size of the scrolling area, you can set the value: ' Disabled ', ' 2000px '
' Bsort ': true,//switch, enable columns to have the Sort by column feature
"Bsortclasses": true,
"Bstatesave": false,//switch, whether to turn on the client state logging feature. This data is recorded in cookies,
When this record is opened, the previous state is saved even if the page is refreshed once, or when the browser is reopened-aocolumndefs cannot hide columns when the------is true
"Sscrollx": "50%",//whether to turn on horizontal scrolling, and specify the size of the scrolling area, you can set the value: ' Disabled ', ' 2000% '
"Aasorting": [[0, ASC]],
' Aocolumndefs ': [{' bvisible ': false, ' atargets ': [0]}],//hidden columns
"Sdom": ' < ' H ' if>t< ' F ' if> ',
"Bautowidth": false,//adaptive width
"Aasorting": [[1, ASC]],
"Spaginationtype": "Full_numbers",
"Olanguage": {
"Sprocessing": "Loading ...",
"Slengthmenu": "Show _menu_ record per page",
"Szerorecords": "Sorry, the query does not have the relevant data!" ",
"Semptytable": "No data exists in the table!" ",
"Sinfo": "The current display _start_ to _end_ bar, total _total_ record",
"Sinfofiltered": "The data table is _max_ record",
"Ssearch": "Search",
"Opaginate": {
"Sfirst": "Home",
"Sprevious": "Prev",
"Snext": "Next Page",
"Slast": "Last"
// }
}//Multi-language configuration
// });
var tabledata = function () {
function to initiate DataTable
The DataTable is a highly flexible tool, based upon the foundations of progressive enhancement,
Which'll add advanced interaction controls to any HTML table
For more information, please visit https://datatables.net/
var rundatatable = function () {
var otable = $ (' #sample_1 '). DataTable ({
"Aocolumndefs": [{
"Atargets": [0]
}],
"Aasorting": [
[1, ' ASC ']
],
"Alengthmenu": [
[5, 10, 15, 20,-1],
[5, all, ' all ']//change in page values here
],
Set how many messages are displayed by default
"Idisplaylength": 10,
"Olanguage": {
"Sprocessing": "Loading ...",
"Slengthmenu": "Show _menu_ record per page",
"Szerorecords": "Sorry, the query does not have the relevant data!" ",
"Semptytable": "No data exists in the table!" ",
"Sinfo": "The current display _start_ to _end_ bar, total _total_ record",
"Sinfofiltered": "The data table is _max_ record",
"Ssearch": "Search",
"Opaginate": {
"Sfirst": "Home",
"Sprevious": "Prev",
"Snext": "Next Page",
"Slast": "Last"
}
}//Multi-language configuration
});
$ (' #sample_1_wrapper. Datatables_filter input '). AddClass ("Form-control input-sm"). attr ("placeholder", "Search");
Modify Table Search input
$ (' #sample_1_wrapper. Datatables_length select '). addclass ("M-wrap small");
Modify Table per page dropdown
$ (' #sample_1_wrapper. Datatables_length select '). Select2 ();
Initialzie Select2 Dropdown
$ (' #sample_1_column_toggler input[type= checkbox '] '). Change (function () {
/* Get the DataTables object Again-this isn't a recreation, just a get of the object * *
var icol = parseint ($ (this). attr ("Data-column"));
var BVIs = Otable.fnsettings (). aocolumns[icol].bvisible;
Otable.fnsetcolumnvis (Icol, BVIs false:true));
});
};
return {
Main function to initiate template pages
Init:function () {
Rundatatable ();
}
};
}();
Tabledata.init ()//Execute
})
</script>
</head>
<body>
<div class= "Container" >
<table class= "Table table-striped table-bordered table-hover table-full-width" id= "Sample_1" >
<thead>
<tr>
<th>Browser</th>
<th class= "Hidden-xs" >Creator</th>
<th>cost (
USD) </th>
<th class= "Hidden-xs" > Software license</th>
<th>current
Layout engine</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amaya</td>
<TD class= "Hidden-xs" >w3c,
Inria</td>
<td>Free</td>
<TD class= "Hidden-xs" >W3C</td>
<td>Amaya</td>
</tr>
<tr>
<td>aol explorer</td>
<TD class= "Hidden-xs" >america Online, inc</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>Trident</td>
</tr>
<tr>
<td>Arora</td>
<TD class= "Hidden-xs" >benjamin C. meyer</td>
<td>Free</td>
<TD class= "Hidden-xs" >GPL</td>
<td>WebKit</td>
</tr>
<tr>
<td>Avant</td>
<TD class= "Hidden-xs" >avant force</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>Tri-engine</td>
</tr>
<tr>
<td>Camino</td>
<TD class= "Hidden-xs" >the Camino project</td>
<td>Free</td>
<TD class= "Hidden-xs" >tri-license</td>
<td>Gecko</td>
</tr>
<tr>
<td>Chromium</td>
<TD class= "Hidden-xs" >Google</td>
<td>Free</td>
<TD class= "Hidden-xs" >BSD</td>
<td>WebKit</td>
</tr>
<tr>
<td>Dillo</td>
<TD class= "Hidden-xs" >the Dillo team</td>
<td>Free</td>
<TD class= "Hidden-xs" >GPL</td>
<td>Dillo</td>
</tr>
<tr>
<td>Dooble</td>
<TD class= "Hidden-xs" >dooble team</td>
<td>Free</td>
<TD class= "Hidden-xs" >GPL</td>
<td>WebKit</td>
</tr>
<tr>
<td>ELinks</td>
<TD class= "Hidden-xs" >baudis, Fonseca, <i>et al.</i></td>
<td>Free</td>
<TD class= "Hidden-xs" >GPL</td>
<td>built-in</td>
</tr>
<tr>
<td>Web</td>
<TD class= "Hidden-xs" >marco pesenti gritti</td>
<td>Free</td>
<TD class= "Hidden-xs" >GPL</td>
<td>WebKit</td>
</tr>
<tr>
<td>Flock</td>
<TD class= "Hidden-xs" >flock inc</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>WebKit</td>
</tr>
<tr>
<td>Galeon</td>
<TD class= "Hidden-xs" >marco pesenti gritti</td>
<td>Free</td>
<TD class= "Hidden-xs" >GPL</td>
<td>Gecko</td>
</tr>
<tr>
<td>google chrome</td>
<TD class= "Hidden-xs" >Google</td>
<td>Free</td>
<TD class= "Hidden-xs" >google Chrome Terms of service</td>
<td>Blink</td>
</tr>
<tr>
<td>gnu icecat</td>
<TD class= "Hidden-xs" >GNU</td>
<td>Free</td>
<TD class= "Hidden-xs" >MPL</td>
<td>Gecko</td>
</tr>
<tr>
<td>iCab</td>
<TD class= "Hidden-xs" >alexander clauss</td>
<td>$20 (Pro) </td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>WebKit</td>
</tr>
<tr>
<td>internet explorer</td>
<TD class= "Hidden-xs" >microsoft,
<br>
Spyglass</td>
<td>comes with windows</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>Trident</td>
</tr>
<tr>
<td>internet Explorer for Mac (terminated) </td>
<TD class= "Hidden-xs" >Microsoft</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>Tasman</td>
</tr>
<tr>
<td>K-Meleon</td>
<TD class= "Hidden-xs" >dorian, Kko, <i>et al.</i></td>
<td>Free</td>
<TD class= "Hidden-xs" >GPL</td>
<td>Gecko</td>
</tr>
<tr>
<td>Konqueror</td>
<TD class= "Hidden-xs" >KDE</td>
<td>Free</td>
<TD class= "Hidden-xs" >GPL</td>
<td>KHTML</td>
</tr>
<tr>
<td>Links</td>
<TD class= "Hidden-xs" >patocka, <i>et al.</i></td>
<td>Free</td>
<TD class= "Hidden-xs" >GPL</td>
<td>built-in</td>
</tr>
<tr>
<td>Lunascape</td>
<TD class= "Hidden-xs" >lunascape corporation</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>Tri-engine</td>
</tr>
<tr>
<td>Lynx</td>
<TD class= "Hidden-xs" >montulli, Grobe, Rezac, <i>et al.</i></td>
<td>Free</td>
<TD class= "Hidden-xs" >GPL</td>
<td>built-in</td>
</tr>
<tr>
<td>Maxthon</td>
<TD class= "Hidden-xs" >maxthon International limited</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>Trident</td>
</tr>
<tr>
<td>Midori</td>
<TD class= "Hidden-xs" >christian Dywan, et al.</td>
<td>Free</td>
<TD class= "Hidden-xs" >LGPL</td>
<td>WebKit</td>
</tr>
<tr>
<td>Mosaic</td>
<TD class= "Hidden-xs" >marc Andreessen and
Eric Bina,
Ncsa</td>
<td>non-commercial use</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>built-in</td>
</tr>
<tr>
<td>mozilla Application suite</td>
<TD class= "Hidden-xs" >mozilla foundation</td>
<td>Free</td>
<TD class= "Hidden-xs" >tri-license</td>
<td>Gecko</td>
</tr>
<tr>
<td>mozilla firefox</td>
<TD class= "Hidden-xs" >mozilla foundation</td>
<td>Free</td>
<TD class= "Hidden-xs" >MPL</td>
<td>Gecko</td>
</tr>
<tr>
<td>netscape (v.6-7) </td>
<TD class= "Hidden-xs" >netscape Communications Corporation,
Aol</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>Gecko</td>
</tr>
<tr>
<td>netscape Browser (v.8) [Note 2]</td>
<TD class= "Hidden-xs" >mercurial Communications for
Aol</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>gecko, trident</td>
</tr>
<tr>
<td>netscape Communicator (v.4) [Note 2]</td>
<TD class= "Hidden-xs" >netscape communications</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>Mosaic</td>
</tr>
<tr>
<td>netscape Navigator (v.1-4) [Note 2]</td>
<TD class= "Hidden-xs" >netscape communications</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>Mosaic</td>
</tr>
<tr>
<td>netscape Navigator 9[note 2]</td>
<TD class= "Hidden-xs" >netscape Communications
<br>
(Division of AOL) </td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>Gecko</td>
</tr>
<tr>
<td>NetSurf</td>
<TD class= "Hidden-xs" >the NetSurf developers</td>
<td>Free</td>
<TD class= "Hidden-xs" >GPL</td>
<td>netsurf built-in</td>
</tr>
<tr>
<td>OmniWeb</td>
<TD class= "Hidden-xs" >the Omni group</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>WebKit</td>
</tr>
<tr>
<td>Opera</td>
<TD class= "Hidden-xs" >opera software</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>Presto</td>
</tr>
<tr>
<td>opera mobile</td>
<TD class= "Hidden-xs" >opera software</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>Presto</td>
</tr>
<tr>
<td>origyn Web browser</td>
<TD class= "Hidden-xs" >Sand-labs</td>
<td>Free</td>
<TD class= "Hidden-xs" >BSD</td>
<td>WebKit</td>
</tr>
<tr>
<td>QupZilla</td>
<TD class= "Hidden-xs" >david rosca</td>
<td>Free</td>
<TD class= "Hidden-xs" >gnu gplv3</td>
<td>WebKit</td>
</tr>
<tr>
<td>Safari</td>
<TD class= "Hidden-xs" >apple inc.</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>WebKit</td>
</tr>
<tr>
<td>SeaMonkey</td>
<TD class= "Hidden-xs" >seamonkey council</td>
<td>Free</td>
<TD class= "Hidden-xs" >tri-license</td>
<td>Gecko</td>
</tr>
<tr>
<td>Shiira</td>
<TD class= "Hidden-xs" >happy Macintosh developing team</td>
<td>Free</td>
<TD class= "Hidden-xs" >BSD</td>
<td>WebKit</td>
</tr>
<tr>
<td>Sleipnir</td>
<TD class= "Hidden-xs" >fenrir inc.</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>Trident</td>
</tr>
<tr>
<td>torch browser</td>
<TD class= "Hidden-xs" >torch media</td>
<td>Free</td>
<TD class= "Hidden-xs" >Proprietary</td>
<td>Webkit</td>
</tr>
<tr>
<td>Uzbl</td>
<TD class= "Hidden-xs" >dieter plaetinck</td>
<td>Free</td>
<TD class= "Hidden-xs" >gnu gplv3</td>
<td>Webkit</td>
</tr>
<tr>
<td>worldwideweb (later renamed Nexus) </td>
<TD class= "Hidden-xs" >tim berners-lee</td>
<td>Free</td>
<TD class= "Hidden-xs" >public domain</td>
<td>nextstep built-in</td>
</tr>
<tr>
<td>w3m</td>
<TD class= "Hidden-xs" >akinori ito</td>
<td>Free</td>
<TD class= "Hidden-xs" >MIT</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</body>
</html> |
