AdminLite 2.4.0 data table not working - javascript

Here is the template, I have copied the contents for the bower_components and dist folders. I also did all the linking and requiring I need or well that I can find to. All requires work no 404's only a status code 200. My code is as follows:
<div class="box">
<div class="box-header">
<h3 class="box-title">Data Table With Full Features</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0
</td>
<td>Win 95+</td>
<td> 4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.0
</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.5
</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
<tr>
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td>-</td>
<td>U</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.box-body -->
</div>
I get the table to show fine but non of the search, show X entries, pagination or anything else like that. It seems like I am copying the Hover Data Table but the code shows it is the Data Table With Full Features. I have also included the small script on the page near the bottom at line 1631-1643 it is this:
$(function () {
$('#example1').DataTable();
$('#example2').DataTable({
'paging' : true,
'lengthChange': false,
'searching' : false,
'ordering' : true,
'info' : true,
'autoWidth' : false
});
});
I have tried moving the files aroun
Excuse the poor code styling, it should still give a proper idea.


in your script you have set false to "searching"
try to use "true"
$(function () {
$('#example1').DataTable();
$('#example2').DataTable({
'paging' : true,
'lengthChange': false,
'searching' : true, // change this one
'ordering' : true,
'info' : true,
'autoWidth' : false
});
});

Related

jQuery datatable: get full row data from a dynamically generated datatable along with the available textbox values

I have a table which is dynamically generated. So have no idea on which columns the textbox or dropdown will be present and how many textbox's will be present. Now for each row in the last column there is a details button. On clicking that button I want the data from all cells including the textbox values using jQuery.
For displaying I have hardcoded the table cell values.
My table is as:
<table id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text"/></td>
<td>Internet Explorer 4.0</td>
<td><select><option value="1">1</option>
<option value="2">2</option></select>
</td>
<td> 4</td>
<td> A</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
<tr>
<td><select><option value="1">1</option>
<option value="2">2</option></select></td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td>6</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td>7</td>
<td>A</td>
</tr>
</tbody>
</table>
And the script goes as:
var table = $('#example').DataTable({
ordering: false,
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button class='addbtn'>Add</button>"
} ]
});
on button click I need to get the row data as:
var rowdata=[];
rowdata=table.row(3).data();
Now using this I get all the cell values of the row except the textbox values, I get them blank. Now I need to copy the complete row along with the html elements and their values on a button click so that I can create a row in other table and display the values.

Hope this helps..
<table id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text"/></td>
<td>Internet Explorer 4.0</td>
<td><select><option value="1">1</option>
<option value="2">2</option></select>
</td>
<td> 4</td>
<td> A</td>
<td><button class='addbtn'>Add</button></td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
<td><button class='addbtn'>Add</button></td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
<td><button class='addbtn'>Add</button></td>
</tr>
<tr>
<td><select><option value="1">1</option>
<option value="2">2</option></select></td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td>6</td>
<td>A</td>
<td><button class='addbtn'>Add</button></td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td>7</td>
<td>A</td>
<td><button class='addbtn'>Add</button></td>
</tr>
</tbody>
</table>
<script>
$( document ).ready(function() {
$( ".addbtn" ).click(function() {
console.log( "add button clicked" );
var rowData = 0;
var t = 0;
$(this).parent().prevAll().each(function(){
if ($(this).find('input').length) {
var thisInput = $(this).find('input');
rowData += parseFloat(thisInput.val()) || 0;
console.log(thisInput.val());
}
else if($(this).find('select').length) {
console.log("td has select box");
var thisInput = $(this).find('select');
rowData += parseFloat(thisInput.val()) || 0;
console.log(thisInput.val());
}
else {
console.log($(this).text());
rowData += parseFloat($(this).text(),0) || 0;
}
});
rowData = rowData.toFixed(2);
console.log("total = " + rowData);
});
});
</script>

Table doesn't reset when click on X

I have following javascript:
$(function(){
$table = $('#myTable')
.tablesorter({
theme: 'blue',
widthFixed: true,
headerTemplate: '{content} {icon}',
widgets: ['zebra','filter'],
widgetOptions: {
zebra: ["even", "odd"],
// filter_anyMatch replaced! Instead use the filter_external option
// Set to use a jQuery selector (or jQuery object) pointing to the
// external filter (column specific or any match)
filter_external : '.search',
// add a default type search to the first name column
filter_defaultFilter: { 1 : '~{query}' },
// include column filters
filter_columnFilters: true,
filter_placeholder: { search : 'Search...' },
filter_saveFilters : true,
filter_reset: '.reset'
}
})
// needed for pager plugin to know when to calculate filtered rows/pages
.addClass('hasFilters')
.tablesorterPager({
container: $(".table-pager"),
output: '{page} of {filteredPages} ({filteredRows})',
size: 5
});
$('#search').quicksearch('table tbody tr', {
delay: 500,
show: function () {
$(this).removeClass('filtered');
$table.trigger('pageSet'); // reset to page 1 & update display
},
hide: function () {
$(this).hide().addClass('filtered');
$table.trigger('pageSet'); // reset to page 1 & update display
},
onAfter: function () {
$table.trigger('update.pager');
}
});
});
(function(b,k,q,r){b.fn.quicksearch=function(l,p){var m,n,h,e,f="",g=this,a=b.extend({delay:100,selector:null,stripeRows:null,loader:null,noResults:"",matchedResultsCount:0,bind:"keyup",onBefore:function(){},onAfter:function(){},show:function(){this.style.display=""},hide:function(){this.style.display="none"},prepareQuery:function(a){return a.toLowerCase().split(" ")},testQuery:function(a,b,d){for(d=0;d<a.length;d+=1)if(-1===b.indexOf(a[d]))return!1;return!0}},p);this.go=function(){for(var c=0,b=
0,d=!0,e=a.prepareQuery(f),g=0===f.replace(" ","").length,c=0,k=h.length;c<k;c++)g||a.testQuery(e,n[c],h[c])?(a.show.apply(h[c]),d=!1,b++):a.hide.apply(h[c]);d?this.results(!1):(this.results(!0),this.stripe());this.matchedResultsCount=b;this.loader(!1);a.onAfter();return this};this.search=function(a){f=a;g.trigger()};this.currentMatchedResults=function(){return this.matchedResultsCount};this.stripe=function(){if("object"===typeof a.stripeRows&&null!==a.stripeRows){var c=a.stripeRows.join(" "),f=a.stripeRows.length;
e.not(":hidden").each(function(d){b(this).removeClass(c).addClass(a.stripeRows[d%f])})}return this};this.strip_html=function(a){a=a.replace(RegExp("<[^<]+>","g"),"");return a=b.trim(a.toLowerCase())};this.results=function(c){"string"===typeof a.noResults&&""!==a.noResults&&(c?b(a.noResults).hide():b(a.noResults).show());return this};this.loader=function(c){"string"===typeof a.loader&&""!==a.loader&&(c?b(a.loader).show():b(a.loader).hide());return this};this.cache=function(){e=b(l);"string"===typeof a.noResults&&
""!==a.noResults&&(e=e.not(a.noResults));n=("string"===typeof a.selector?e.find(a.selector):b(l).not(a.noResults)).map(function(){return g.strip_html(this.innerHTML)});h=e.map(function(){return this});f=f||this.val()||"";return this.go()};this.trigger=function(){this.loader(!0);a.onBefore();k.clearTimeout(m);m=k.setTimeout(function(){g.go()},a.delay);return this};this.cache();this.results(!0);this.stripe();this.loader(!1);return this.each(function(){b(this).on(a.bind,function(){f=b(this).val();g.trigger()})})}})(jQuery,
this,document);
following html:
<form>
<div>
<input id="search" type="search" placeholder="Search" />
</div>
</form>
<div class="table-pager">Show
<select class="pagesize">
<option selected="selected" value="5">5</option>
<option value="10">10</option>
</select>entries | <span class="pagedisplay"></span> |
<button type="button" class="btn prev">←</button>
<button type="button" class="btn next">→</button>
</div>
<table id="myTable">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc 123</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>abc 1</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>abc 9</td>
<td>10</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>zyx 24</td>
<td>767</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>abc 11</td>
<td>3</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
<tr>
<td>abc 2</td>
<td>56</td>
<td>Elephant</td>
<td>http://www.wikipedia.org/</td>
</tr>
<tr>
<td>abc 9</td>
<td>155</td>
<td>Lion</td>
<td>http://www.nytimes.com/</td>
</tr>
<tr>
<td>ABC 10</td>
<td>87</td>
<td>Zebra</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>zyx 1</td>
<td>999</td>
<td>Koala</td>
<td>http://www.mit.edu/</td>
</tr>
<tr>
<td>zyx 12</td>
<td>0</td>
<td>Llama</td>
<td>http://www.nasa.gov/</td>
</tr>
<tr>
<td>abc 111</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>abc 1</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>abc 9</td>
<td>10</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>zyx 24</td>
<td>767</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>abc 11</td>
<td>3</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
<tr>
<td>abc 2</td>
<td>56</td>
<td>Elephant</td>
<td>http://www.wikipedia.org/</td>
</tr>
<tr>
<td>abc 9</td>
<td>155</td>
<td>Lion</td>
<td>http://www.nytimes.com/</td>
</tr>
<tr>
<td>ABC 10</td>
<td>87</td>
<td>Zebra</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>zyx 1</td>
<td>999</td>
<td>Koala</td>
<td>http://www.mit.edu/</td>
</tr>
<tr>
<td>zyx 12</td>
<td>0</td>
<td>Llama</td>
<td>http://www.nasa.gov/</td>
</tr>
<tr>
<td>abc 222</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>abc 1</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>abc 9</td>
<td>10</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>zyx 24</td>
<td>767</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>abc 11</td>
<td>3</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
<tr>
<td>abc 2</td>
<td>56</td>
<td>Elephant</td>
<td>http://www.wikipedia.org/</td>
</tr>
<tr>
<td>abc 9</td>
<td>155</td>
<td>Lion</td>
<td>http://www.nytimes.com/</td>
</tr>
<tr>
<td>ABC 10</td>
<td>87</td>
<td>Zebra</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>zyx 1</td>
<td>999</td>
<td>Koala</td>
<td>http://www.mit.edu/</td>
</tr>
<tr>
<td>zyx 12</td>
<td>0</td>
<td>Llama</td>
<td>http://www.nasa.gov/</td>
</tr>
</tbody>
</table>
It works almost good. I have one issue only.
When I click X to reset filter - nothings to happens.
desired result - filter should reset and table should update.
Also I have a problem when I erase symbols in search field - table don't update
How to fix this issue?

It looks like the quicksearch demo no longer works properly.
So, instead of using the quicksearch plugin, you could use the filter widget to match content in all columns:
<input class="search" type="search" data-column="all">
then include that input as an external filter, and hide the filter row
filter_external : '.search',
filter_columnFilters: false
To do the same thing, and have the "x" in the input work properly.
Full code & demo:
$(function () {
$table = $('#myTable')
.tablesorter({
theme: 'blue',
widthFixed: true,
headerTemplate: '{content} {icon}',
widgets: ['zebra', 'filter'],
widgetOptions: {
zebra: ["even", "odd"],
filter_external: '.search',
filter_columnFilters: false
}
})
.tablesorterPager({
container: $(".table-pager"),
output: '{page} of {filteredPages} ({filteredRows})',
size: 5
});
});

have already tried adding needed plugin in head section
<script src="https://my-script-hosting.googlecode.com/files/jquery.tablesorter.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.5/addons/pager/jquery.tablesorter.pager.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.5/addons/pager/jquery.tablesorter.pager.min.js"></script>

Uncaught TypeError: Cannot read property 'className' of undefined dataTable

I have table:
HTML
<table id="mydata">
<thead>
<tr>
<th>Data 1</th>
<th>Data 2</th>
<th>Data 3</th>
<th>Data 4</th>
</tr>
</thead>
<tbody>
<tr class="main">
<td class="data_1">A</td>
<td class="data_2">B</td>
<td class="data_3">C</td>
<td class="data_4">D</td>
</tr>
</tbody>
</table>
When i'm using dataTable to sort with jquery:
JavaScript
jQuery('#mydata').dataTable({
"sDom": " ",
"bPaginate": false,
"bInfo": false,
'bFilter':false,
"aoColumns": [
null,
null,
null,
null
]
});
It's worked.
But, when i add child rows for main:
HTML
<table id="mydata">
<thead>
<tr>
<th>Data 1</th>
<th>Data 2</th>
<th>Data 3</th>
<th>Data 4</th>
</tr>
</thead>
<tbody>
<tr class="main">
<td class="data_1">A</td>
<td class="data_2">B</td>
<td class="data_3">C</td>
<td class="data_4">D</td>
</tr>
<tr class="detail-header">
<td><strong>A1</strong></td>
<td><strong>B1</strong></td>
<td><strong>C1</strong></td>
<td><strong>D1</strong></td>
</tr>
<tr class="detail">
<td><strong>A2</strong></td>
<td><strong>B2</strong></td>
<td><strong>C2</strong></td>
<td><strong>D2</strong></td>
</tr>
<tr class="control">
<td colspan="2">Show details</td>
<td colspan="2">Hide details</td>
</tr>
</tbody>
</table>
In that html: detail-header, detail and control are childs of main and they show when click to Show details, it's should ignore when sort but i seem they also sort by dataTable so i received error:
Uncaught TypeError: Cannot read property 'className' of undefined

dataTables does not accept colspans in <tbody>. Place the last row (the row with links) in a <tfoot> instead :
<tfoot>
<tr class="control">
<td colspan="2">Show details</td>
<td colspan="2">Hide details</td>
</tr>
</tfoot>
demo -> http://jsfiddle.net/71zcn578/

trying to custom style datatables table

i am trying to modify the layout datatables generate by default. like move the filter search bar below and table length dropdown menu below and etc.. basically custom style the whole table but i cant understand how i can. i checked the documentation on the datatables website but cant seem to understand. below is my code:
html:
<table class="table table-bordered table-striped table-condensed" id="ray-table">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function() { /* Build the DataTable with third column using our custom sort functions */
$('#ray-table').dataTable({
"aaSorting": [[0, 'asc'], [1, 'asc']],
"aoColumnDefs": [
{
"sType": 'string-case',
"aTargets": [2]}
]
});
});​

Use the sDom options, something like:
$('#ray-table').dataTable( {
"aaSorting": [ [0,'asc'], [1,'asc'] ],
"sDom": "<tlfrip>",
"aoColumnDefs": [
{ "sType": 'string-case', "aTargets": [ 2 ] }
]
} );

Client side Pagination

I want to do client side pagination and used the Jquery suggestion as suggested here.
There are few issues in using that script.One the paging icons always come at the bottom no matter what we set the position on the pager div.Plus my table has some data size inconsistenzies and hence may have a varying size page to page.Because of this the table size varies drastically but the pager remains fixed casuing overlap.I tried div to serperate but of no use.Here is my pager code
<div id="pager" class="pager">
<form>
<img src="../addons/pager/icons/first.png" class="first"/>
<img src="../addons/pager/icons/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="../addons/pager/icons/next.png" class="next"/>
<img src="../addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
This is my Jquery script
<script type="text/javascript">
$(function() {
$(theTable)
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
});
</script>
My table id is theTable.
I want to place the pager code to come at the top so that the size of my table does not affect the pagination icons.

The are lots of examples available on DataTables you can download the examples along with the css and the javascripts required for it...
Also it is very easy to initialize here is a code sample :
Add the css and js(available in the downloaded zip file) required at the top
<style type="text/css" title="currentStyle">
#import "../../media/css/demo_page.css";
#import "../../media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
The table with the id 'theTable'
<table cellpadding="0" cellspacing="0" border="0" class="display" id="theTable">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
</tbody>
Now Intialize datatables by the following:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#theTable').dataTable();
} );
</script>
That will inialize datatable wit zero configs....
To set position of the pagination use the sDom feature
"sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'
Notice the letters lfr, t,ip they stand for :
'l' - Length changing
'f' - Filtering input
't' - The table!
'i' - Information
'p' - Pagination
'r' - pRocessing
Just swap the places of these letters and get them where you want r/l by p

I would recommend using Datatables . Just follow the documentation. Let me know in case you face any problems. You just need to call the construction function to get started
$(document).ready(function() {
$('#tableid').dataTable();
} );
You can download the source files from here

Categories

Resources