I'm just a beginner and starting Jquery.I want to create a gridview with the below code. I created the table inside a div and called the jquery datatable script implement the gridview for the table:
<div id="cont-lef">
<table align="center" cellpadding="5px" border="1" id="myGridStyle">
<tr>
<td><p>Sunday Mornings</td>
<td><p>Rs 2.5 lakhs + ST</td>
</tr>
<tr>
<td><p>Saturday &Sunday Afternoons</td>
<td><p>Rs 2.0 lakhs + ST</td>
</tr>
<tr>
<td><p>Weekdays </td>
<td><p>Rs 1.5 lakhs + ST</td>
</tr>
<tr>
<td><p>Tournament Management</td>
<td><p>Rs. 25,000 + ST</td>
</tr>
<tr>
<td><p>Caddy Fee</td>
<td><p>Rs. 300 per caddy</td>
</tr>
</table>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
$(function(){ $("#myGridStyle").dataTable(); })
</script>
<p>
<i>*Catering to be negotiated directly with caterer</i>
</p>
</div>
Now, why is it not creating the datatable gridview when I have done exactly what as it is in the example.
DEMO
You haven't added the css file...
here's the demo DEMO
<link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
also refer link
Related
I have an HTML data table, I attached code and also attached test case. Here I do dynamically prepend the row in data table,that means I want to add a row in first position with serial number dynamically. Test Case Datatable
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Age</th>
<th>Salary.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Nixon</td>
<td>61</td>
<td>$320,800</td>
</tr>
<tr>
<td>2</td>
<td>Garrett Winters</td>
<td>63</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
<input type="button" value="addNew Row" onclick="addNewRow()"/>
</body>
</html>
And the JavaScript is:
function addNewRow() {
var table = $('#example').dataTable();
var rowLen = table.fnGetData().length;
var srNo = rowLen + 1;
var t = $('#example').DataTable();
t.row.add(['1','vuyv','54','89855']).node().id = 'lclSsrContainer_' + rowLen;
t.draw(false);
$('#lclSsrContainer_' + rowLen).attr('style', 'color: #0822f3;');
}
How to add dynamically in first position with dynamic serial number, and no change in data table?
Datatable has no property liked
prepend()
If we want to add a row in first postion it collapse our datatable functionalities,So finally after adding a row
t.row.add([rowLen,'vuyv','54','89855']).node().id = 'demo_' + rowLen;
just reorder the table as like
$('.sorting_asc').click();
this jquery function can solve my problem.It comes first position
because your table is set to sort on "s.no" the row will be inserted based in this value so if you did :
t.row.add(['0','vuyv','54','89855']).node().id = 'lclSsrContainer_' + rowLen;
that would be placed in the first row because the "s.no" value is "0" and if you wanted it at the end row every time:
t.row.add([rowLen,'vuyv','54','89855']).node().id = 'lclSsrContainer_' + rowLen;
the problem is though is if you waned "s.no" as any value and still be the first row you would have to remove the sort from the table
hope this helps
I have created a random table and I've been trying to export it as an excel, csv, pdf, and to be able to copy and print the table. I'm able to do every single thing except export to excel and I'm not sure what's the file that I forgot to add. Here's my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dataTables.js" type="text/javascript"></script>
<script src="dataTables.buttons.js" type="text/javascript"></script>
<script src="buttons.flash.min.js" type="text/javascript"></script>
<script src="buttons.html5.min.js" type="text/javascript"></script>
<script src="buttons.print.min.js" type="text/javascript"></script>
<script src="flashExport.swf" type="text/javascript"></script>
<script src="dataTables.buttons.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
</head>
<body>
<table id="demoTable">
<thead>
<tr>
<th> Name</th>
<th> Program</th>
<th> Age</th>
<th> Homecity</th>
</tr>
</thead>
<tbody>
<tr>
<td> A</td>
<td> Computer Engineering</td>
<td> 20 Years old</td>
<td> Mississauga</td>
</tr>
<tr>
<td> B</td>
<td> Computer Engineering</td>
<td> 19 Years old</td>
<td> Vancouver</td>
</tr>
<tr>
<td> C</td>
<td> Computer Engineering</td>
<td> 19 Years old</td>
<td> Vancouver</td>
</tr>
<tr>
<td> D</td>
<td> Computer Engineering</td>
<td> 19 years old</td>
<td> Ottawa</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
$(function() {
$("#demoTable").DataTable({
dom: 'Bfrtip',
buttons: ['csv', 'excel', 'pdf', 'copy', 'print']
});
})
</script>
Thank you in advance for helping me.
It's possible that the jQuery script tag outside of the <html> is causing issues with other resources loading. You also want to make sure the <script> containing the DataTable() initialization/configuration is inside the <body> tag or loaded as separate file within the <body> or <head>. I'd make sure by inspecting source on your instance that you can see each and every file being successfully loaded from your local file system/server.
Also, I'd re-evaluate the <script> resources with file type .swf, the working example is only using .js resources. If you need to include .swf files you would likely need to embed them. See this question.
I've created a working example here including exporting to excel.
Hopefully that helps!
General info: I am trying to make a table using the JQuery mobile. Up to this point my table looks good however, I have some minor issues.
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<style>
th
{
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even)
{
background:#e9e9e9;
}
</style>
</head>
<body>
<h1>My Name</h1>
<div data-role="page" id="pageone">
<div data-role="header">
<h1> Cs496 Hw2</h1>
<h2> By: My Name here</h2>
</div>
<div data-role="main" class="ui-content">
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
<thead>
<tr>
<th data-priority="1">No.</th>
<th>School Name</th>
<th data-priority="2">LOGO</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td id="schoolName_0">schools[0].name</td>
<td id="schoolImage_0">schools[0].image</td>
</tr>
<tr>
<td>2</td>
<td id="schoolName_1">schools[1].name</td>
<td id="schoolImage_1">schools[1].image</td>
</tr>
<tr>
<td>3</td>
<td id="schoolName_2">schools[2].name</td>
<td id="schoolImage_2">schools[2].image</td>
</tr>
<tr>
<td>4</td>
<td id="schoolName_3">schools[3].name</td>
<td id="schoolImage_3">schools[3].image</td>
</tr>
<tr>
<td>5</td>
<td id="schoolName_4">schools[4].name</td>
<td id="schoolImage_4">schools[4].image</td>
</tr>
<tr>
<td>6</td>
<td id="schoolName_5">schools[5].name</td>
<td id="schoolImage_5">schools[5].image</td>
</tr>
<tr>
<td>7</td>
<td id="schoolName_6">schools[6].name</td>
<td id="schoolImage_6">schools[6].image</td>
</tr>
</tbody>
</table>
<script type='text/javascript'>
function school(name,image){
this.name = name;
this.image = image;
}
var schools = [
new school('Oregon State University', "http://www.sports-logos-screensavers.com/user/OregonStateBeavers.jpg"),
new school('University of Oregon', "http://www.sports-logos-screensavers.com/user/Oregon_Ducks06.jpg"),
new school('Stanford University', "http://www.sports-logos-screensavers.com/user/Stanford_Cardinal.jpg")
new school('University of Southern California', "http://www.sports-logos-screensavers.com/user/USC_Trojans2.jpg"),
new school('University of Washington', "http://www.sports-logos-screensavers.com/user/Washington_Huskies2.jpg"),
new school('San Diego State University', "http://www.sports-logos-screensavers.com/user/SanDiegoStateAztecs3.jpg"),
new school('Florida State University', "http://www.sports-logos-screensavers.com/user/FloridaStateSeminoles.jpg")
];
</script>
</div>
</body>
</html>
Q: What I want to do is use Jquery to insert the contents of the schools array into the correct columns and rows. I wanted to do this by making an array of objects and then insert the associated element in the correct location in the table (where logos are links to images).
I have tried using both Jquery's append and appendto commands in the script portion of my html but that did not work. Also I tried using the document.getElementbyId(...) but that did'nt work either. I believe the script portion of my html is never being called.
Any Ideas are welcome.
The reference to schools[x].name and schools[x].image is not how javascript, or jQuery for that matter, will execute those. Infact this is probably rendering as straight text in your html <td> tags rather than the array element value you are hoping for.
Here is what I would do.
First, add an appropriate class to each of the <td> elements, and a rel attr to hold the counter like so:
<tr>
<td>1</td>
<td class='name' rel='0'></td>
<td class='image' rel='0'></td>
</tr>
Then, iterate over each of the <td> elements in the table, using the rel tag as the array index to retrieve the values from; finally, apply the values to the <td> tags with the .html('...') function, like so:
$.each( $("table#myTable tr td"), function(i,e){
var $this = $(this), //set $(this) object to a variable rather than referencing it multiple times
rel = parseInt( $this.attr('rel') );
//only look for td elements that have a class
if( $this.hasClass('name') )
$this.html( schools[ rel ].name );
if( $this.hasClass('image') )
$this.html( '<img src="' + schools[ rel ].image + '"/>' );
});
I haven't tested this, but I think the logic is sound...
I try to put 2 tables in a same page using jquery plugin tablesorter ..
But if do it, my second table does not work correctly..
In my second table, i have not the header name of my second table,
You can see it here :http://jsfiddle.net/9hHx5/
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.scroller.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('table.tablesorter').tablesorter({
scrollHeight: 150,
widgets: ['zebra','scroller']
});
//Setup window.resizeEnd event
$(window).bind('resize', window_resize);
$(window).bind('resizeEnd', function (e) {
/*
IE calls resize when you modify content, so we have to unbind the resize event
so we don't end up with an infinite loop. we can rebind after we're done.
*/
$(window).unbind('resize', window_resize);
$('table.tablesorter').each(function(n, t) {
if (typeof t.resizeWidth === 'function') t.resizeWidth();
});
$(window).bind('resize', window_resize);
});
});
function window_resize() {
if (this.resize_timer) clearTimeout(this.resize_timer);
this.resize_timer = setTimeout(function () {
$(this).trigger('resizeEnd');
}
, 250
);
}
</script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="inner-header">Demo</div>
<table id="table1" cellspacing="0" cellpadding="0" class="tablesorter">
<thead>
<tr>
<th class="yr">Year</th>
<th>Artist</th>
<th>Single</th>
<th>Album</th></tr>
</thead>
<tbody>
<tr><td class="yr">1979</td><td>Specials</td><td>Gangsters</td><td>Non-album single</td></tr>
<tr><td class="yr">1979</td><td>Specials</td><td>A Message to You, Rudy</td><td>Specials </td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Too Much Too Young</td><td>Specials</td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Rat Race</td><td>Non-album single</td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Stereotype</td><td>More Specials</td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Do Nothing</td><td>More Specials</td></tr>
</tbody>
</table>
<table id="table2" cellspacing="0" cellpadding="0" class="tablesorter">
<thead>
<tr>
<th>People</th><th>Age</th><th>Birthday</th>
</thead>
<tbody>
<tr>
<td class="yr">XYZ</td><td>12</td><td>12/15/2012</td></tr>
<tr>
<td class="yr">RZE</td><td>36</td><td>12/12/1985</td></tr>
<tr>
<td class="yr">HFF</td> <td>36</td><td>01/02/1985</td>
</tr>
</tbody>
</table>
</body>
</html>
Please if someone can help me
The problem appears to be a bug in the scroller widget code:
Change this line:
var $hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $('thead', table[0]).html() + '<thead></table>');
to this (it's just this part $('thead', $tbl).html() that changed)
var $hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $('thead', $tbl).html() + '<thead></table>');
and it fixes the problem.
I've included that correction in this updated demo.
I would also like to suggest you try out my fork of tablesorter which includes lots of improvements, as well as this updated scroller widget (which still has some problems that needs fixing).
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']});
}
);