Jquery datatables button not working? - javascript

Here is my screenshot :
This is my following code:
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script
<Script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'My button',
action: function ( e, dt, node, config ) {
alert( 'Button activated' );
}
}
]
} );
} );
</script>
I'm trying to use this code from https://datatables.net/extensions/buttons/custom. I dont why my button button didn't show up. I was wondering why this code is not working. Can anyone please tell me how to use 'jQuery DataTables Button'?

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
you have script error. try this one.
Screenshot:
http://prntscr.com/eazm0r

You have not properly closed script tag you have a missing > from below script tag
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

Related

How to hide a table upon page load and then display filtered data with table headers?

Upon loading my table page, I want the table to be completely hidden.When I load the page, I want to filter the data and display the headers and related data based on the selected filter.
I am able to hide the table upon page load as well as filter it.
My issue:
Although the filter works, I am having trouble displaying the headers along with the related rows when Select Location is selected.
I would like to remove the gray line that appears upon page load.
Please see the sample code here: http://live.datatables.net/milazige/6/edit
$(document).ready(function () {
// hide tbody on load
$('#example tbody').hide();
$('#example thead').hide();
var table = $('#example').DataTable({
paging: false,
searching: true,
lengthChange: false,
responsive: false,
scrollX: true,
bInfo: false,
bSort: false,
"language": {
"zeroRecords": ""
}
});
$('#table-filter').on('change', function () {
// show the tbody when the user clicks on a filter option
$('#example thead').show();
$('#example tbody').show();
table.search(this.value).draw();
});
});
.dataTables_wrapper .dataTables_filter {
padding-bottom: 16px;
display: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
</head>
<body>
<p>Select: <select id="table-filter">
<option>Location</option>
<option>Dallax, TX</option>
<option>Boston, MA</option>
<option>Sandy, UT</option>
<option>Washington, DC</option>
<option>Omaha, NE</option>
</select>
</p>
<table id="example" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"><thead>
<tr>
<th>Location</th>
<th>Name</th>
<th>Job</th>
<th>Salary</th>
</tr>
</thead><tbody>
<tr>
<td>Dallax, TX</td>
<td>test1</td>
<td>5</td>
<td>16</td>
</tr>
<tr>
<td>Boston, MA</td>
<td>test2</td>
<td>test2</td>
<td>test2</td>
</tr>
<tr>
<td>Sandy, UT</td>
<td>test3</td>
<td>test3</td>
<td>test3</td>
</tr>
<tr>
<td>Washington, DC</td>
<td>test4</td>
<td>test4</td>
<td>test4</td>
</tr>
<tr>
<td>Omaha, NE</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
</tbody></table>

key-focus not working in jquery plugin DataTables

i was trying to learn key-focus in my jquery Datatables but it doesn't work. Here is my simple piece of code. can anyone please help me know what's the problem ?
This is my HTML file :
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="tableScript.js"></script>
<meta charset="UTF-8">
</head>
<body>
<table id = "example" style="width:100%">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<div id="details"></div>
</body>
</html>
This is my JS file (tableScript.js) :
$(document).ready(function() {
var table = $('#example').DataTable( {
keys: true
} );
table
.on( 'key-focus', function ( e, datatable, cell, originalEvent ) {
var rowData = datatable.row( cell.index().row ).data();
$('#details').html( 'Cell in '+rowData[0]+' focused' );
} )
.on( 'key-blur', function ( e, datatable, cell ) {
$('#details').html( 'No cell selected' );
} );
});
It doesn't show any information in (#details). Any idea what's wrong here ?
$(document).ready(function () {
var table = $('#example').DataTable({
keys: true
});
table
.on('key-focus', function (e, datatable, cell, originalEvent) {
var rowData = datatable.row(cell.index().row).data();
$('#details').html('Cell in ' + rowData[0] + ' focused');
})
.on('key-blur', function (e, datatable, cell) {
$('#details').html('No cell selected');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src='https://cdn.datatables.net/keytable/2.2.0/js/dataTables.keyTable.min.js'></script>
<table id = "example" style="width:100%">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tfoot>
<tr>
<th align="right">Count</th>
<th align="left"></th>
<th align="left"></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td contenteditable>4</td>
<td contenteditable>5</td>
<td contenteditable>6</td>
</tr>
<tr>
<td contenteditable>7</td>
<td contenteditable>8</td>
<td contenteditable>9</td>
</tr>
</tbody>
</table>
<div id="details"></div>
Note :- You need to add dataTables.keyTable to bind key events

bootstrap table custom search

I have following table:
<table>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
<tr>
<td>200.10.1234</td>
<td>Maria Anders</td>
</tr>
<tr>
<td>202.10.9234</td>
<td>Francisco Chang</td>
</tr>
</table>
JS:
$('#table').bootstrapTable({
pagination: true,
search: true,
});
I want to implement following search behaviour: if the user search for "2001" or "200.1" then the first entry shall be shown. If the user search for "10.1234" or "101234" then again the first entry shall be shown.
Does anybody have an idea how to implement this?
Here is the doc: http://bootstrap-table.wenzhixin.net.cn/documentation/
You may do as follows;
var ftds = document.querySelectorAll("tr > td:first-child"),
choose = document.getElementById("choose");
choose.addEventListener("change", function isChosen(e) {
ftds.forEach(function(ftd) {
var dotless = ftd.textContent.replace(/\./g, "");
ftd.parentElement.style.backgroundColor = ~ftd.textContent.indexOf(e.target.value) ||
~dotless.indexOf(e.target.value) ? "green" : "white";
});
});
<table>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
<tr>
<td>200.10.1234</td>
<td>Maria Anders</td>
</tr>
<tr>
<td>202.10.9234</td>
<td>Francisco Chang</td>
</tr>
</table>
<label for="choose">Chose ID:</label>
<input id="choose" required>
I was a little lazy to add a button but striking tab or clicking somewhere out of the input element should do.
Hint: ~(-1) === 0; tilde changes -1 to 0 (falsey value)
OK lets carry on with a Bootstrap example. This time we will define a class for the row that contains the number we search and add it to our CSS file. Let it be something like;
.found {
outline: #2E8B57 solid 1px;
background-color: #98FB98;
}
Now if we check all first <td> elements (which contains the number data) in each row. If it doesn't contain we will remove the .found class from the parentElement.classList (if the parent element's class list doesn't have it no error will be thrown) if we find what we are looking for then we will add .found class to the parent element's class list.
Very simple..
var ftds = document.querySelectorAll("tr > td:first-child"),
choose = document.getElementById("choose");
choose.addEventListener("change", function isChosen(e) {
ftds.forEach(function(ftd) {
var dotless = ftd.textContent.replace(/\./g, "");
~ftd.textContent.indexOf(e.target.value) ||
~dotless.indexOf(e.target.value) ? ftd.parentElement.classList.add("found")
: ftd.parentElement.classList.remove("found");
});
});
.found {
outline: #2E8B57 solid 1px;
background-color: #98FB98;
}
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>Number</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>200.10.1234</td>
<td>Maria</td>
<td>Anders</td>
</tr>
<tr>
<td>202.10.9234</td>
<td>Fransisco</td>
<td>Chang</td>
</tr>
<tr>
<td>203.10.5678</td>
<td>Fabrio</td>
<td>Donetti</td>
</tr>
</tbody>
</table>
</div>
<label for="choose">Search ID:</label>
<input id="choose" required>
</body>
</html>
#Lahmacun, I've linked a codeply project that implements the bootstrap table. All of this code can be found in the documentation for the website that you've provided. In fact, the search functionality you're looking for is already baked into it; no need to write any custom code. You just have to call it by setting the data-search attribute to true.
HTML Code:
<table id="table" data-url="" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true">
</table>
JavaScript Code:
$('#table').bootstrapTable({
columns: [{
field: 'number',
title: 'Number'
}, {
field: 'name',
title: 'Name'
}],
data: [{
id: 1,
number: '200.10.1234',
name: 'Maria Anders'
}, {
id: 2,
number: '202.10.9234',
name: 'Francisco Chang'
}]
});

fixed column not working

Datatable Fixed column is not working
Scrollbody width and table widths are coming as equal. So I am not getting the horizontal scroll bar for the fxed columns.
we are using " jquery.dataTables.min-1.9.4.js" and Fixedcolumns (3.0.1).js.
html and javascript:
<html>
<head>
<script src="datatables/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="datatables/jquery.dataTables.min-1.9.4.js" type="text/javascript"></script>
<script src="datatables/extras/FixedColumns.js" type="text/javascript"></script>
<link href="datatables/css/dataTables.fixedColumns.css" rel="stylesheet" type="text/css" />
<link href="datatables/css/jquery.dataTables-1.9.4.css" rel="stylesheet" type="text/css" />
<link href="datatables/css/dataTables.fixedHeader.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">HR Information</th>
<th colspan="3">Contact</th>
</tr>
<tr>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>$320,800</td>
<td>Edinburgh</td>
<td>5421</td>
<td>t.nixon#datatables.net</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>$170,750</td>
<td>Tokyo</td>
<td>8422</td>
<td>g.winters#datatables.net</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>$86,000</td>
<td>San Francisco</td>
<td>1562</td>
<td>a.cox#datatables.net</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>$433,060</td>
<td>Edinburgh</td>
<td>6224</td>
<td>c.kelly#datatables.net</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>$162,700</td>
<td>Tokyo</td>
<td>5407</td>
<td>a.satou#datatables.net</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
var datatables_options =
{
"bAutoWidth": true,
"sDom": '<"top"i>rt<"bottom"flp><"clear">', //determine render order for datatables.net items, http://datatables.net/ref#sDom
"bPaginate": false, // paging
"sPaginationType": "full_numbers", // http://datatables.net/release-datatables/examples/basic_init/alt_pagination.html
"iDisplayLength": 10, // page row size
"bSort": true, //sorting
"bFilter": false, // "search" box
"aaSorting": [], // default sort
"bInfo": false, // "Showing x to y of z entries" message
"bStateSave": false, // save state into a cookie
"iCookieDuration": 0, // save state cookie duration
"bScrollAutoCss": true, // datatables.net auto styling of scrolling styles, http://datatables.net/forums/discussion/comment/15072
"bProcessing": true, // "processing" message while sorting .. doesn't appear to be doing anything
"bJQueryUI": false // css classes for jQueryUI themes?
//"asStripeClasses": [], // remove odd/even row css classes (they will be assigned elsewhere)
};
datatables_options["sScrollY"] = "450px";
datatables_options["sScrollX"] = "100%";
datatables_options["bScrollCollapse"] = true;
var $datatable = $(".example").dataTable(datatables_options);
new $.fn.dataTable.FixedColumns($datatable,
{
"iLeftColumns": 1,
//"sLeftWidth": 'relative',
//"iLeftWidth": 20,
"sHeightMatch": "none", /* if there aren't any rows that have wrapping text this would be best because it is much faster in IE8 */
//"sHeightMatch": "semiauto",
//"sHeightMatch": "auto",
});
});
</script>
</body>
<style type="text/css">
th, td {
white-space: nowrap;
padding-left: 40px !important;
padding-right: 40px !important;
}
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
</style>
</html>
screenshot:
You just have the table width set to 100% and sScrollX set to 100%. You lack to define sScrollXInner :
This property can be used to force a DataTable to use more width than
it might otherwise do when x-scrolling is enabled. (...)
add
datatables_options["sScrollXInner"] = '150%';
or whatever width you want the table to have, to your options object. Your example as above in a demo -> http://jsfiddle.net/PEN7T/

Jquery tablesorter not working

I am new to Jquery and web-programming in general. I am trying to use the tablesorter jquery plugin, for one of my programs only to find that it is not working. After some tweaking, I was unable to make it work. So resorted to Stack Overflow.
Can you please explain what my mistake is? Thanks in advance :)
Now, my html file(following code) is in the same folder as my "jquery.tablesorter.js" is in. I'm trying to use google Jquery CDN from the W3 schools quoted below :
http://www.w3schools.com/jquery/jquery_install.asp
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);
</script>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
</html>
for filename in os.listdir (input_dir) :
f = open(file_name, 'rb')
file_content = f.readlines()
f.close()
len_file = len(file_content)
while( i < len_file ):
line = file_content[i].split(delimiter)
i +=1
Update1: I'm able to fix this error. Seems adding Content Distribution from Google caused the error changing it to a internal directory seems to solve the problem.
Actually, I changed,
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
to this line.
<script src="jquery-1.9.1.js" type="text/javascript" ></script>
and it worked :)
Any ideas why Google CDN didn't work ? Thanks! :)
Update2:
When you test the code locally, try to add http: before the google CDN call.ie,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Enjoy the plugin:)
I bet it is working, you're just not seeing any table styling because the tablesorter.css file isn't loaded. Try clicking on the table head and see if it sorts.
You can try - It works for me..
$(document).ready(function()
{
$("#myTable").tablesorter({sortList:[[0,0],[2,1]], widgets:'zebra']});
}
);

Categories