I'm trying to load a .htm template from .js file. But there is a script present in .htm file which gets triggers when the template is loaded and things are smooth.
Here how the template looks. testing.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>http://stackoverflow.com/questions/6946559/jqgrid-please-help</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": '/Home/GetData',
"sScrollY": "400px",
"sScrollX": "200px",
"bPaginate": false
});
});
</script>
</head>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Date</th>
<th width="25%">Name</th>
<th width="25%">ProposalID</th>
<th width="25%">Time</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</html>
Here is the .js file which loads the template.
var iTabs = function () {
return {
Init: function () {
var placeholder = $("#testtab");
placeholder.setTemplateURL("/Templates/Home/testing.htm");
placeholder.load("/Templates/Home/testing.htm");
}
}
} ();
But, now i want to execute the .htm script in .js file i.e after loading the template.
If i run only a part of script i.e
$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": '/Home/GetData',
"sScrollY": "400px",
"sScrollX": "200px",
"bPaginate": false
});
in .js file, it wont work. Is it possible to run this script in .js file?. if so how?
Try to run that js code using the callback of the load
Like this :
placeholder.load("/Templates/Home/rpt.htm", function() {
$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": '/Home/GetData',
"sScrollY": "400px",
"sScrollX": "200px",
"bPaginate": false
});
});
For more info , refer to the jQuery load docs
Related
I have a simple MVC proj, using BootStrap4 and dataTables.Net.
Link to DataTables.net It makes an Ajax call after page loads to retrieve data for a table. But as per the Docs I have gone through. I can not get the buttons to display on the page. There are no errors and everything loads as expected only without the Buttons.
It appears to work correcty in Explorer, but not Chrome.
I believe it has to do with the ajax call to retrieve the data but haven't figured it out yet.
The Call on the Layout page to Initialize CSS and JS:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/schit")
Heres the Bundles in the BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/schit").Include(
"~/Scripts/DataTables/media/js/jquery.dataTables.min.js"
,"~/Scripts/DataTables/extensions/Buttons/js/dataTables.buttons.js"
, "~/Scripts/DataTables/extensions/Buttons/js/dataTables.html5.js"
, "~/Scripts/DataTables/extensions/Buttons/js/buttons.print.js"
, "~/Scripts/DataTables/extensions/Buttons/js/buttons.colVis.js"
, "~/Scripts/DataTables/extensions/Buttons/js/buttons.flash.js"
));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"
, "~/Content/DataTables/media/css/jquery.dataTables.min.css"
, "~/Content/DataTables/extensions/Buttons/css/buttons.dataTables.css"
));
<table id="ListTable">
<thead>
<tr>
<th>
Center
</th>
<th>
Account
</th>
<th>
Ledger
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<script type="text/javascript">
$(function () {
$('#ListTable').DataTable({
ajax: '/Home/GetStuff',
dataSrc: 'data',
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
text: 'copy'
},
'excel',
'csv',
'pdf'
],
columns: [
{ data: 'Center' },
{ data: 'Account' },
{ data: 'Ledger' }
]
});
});
Posting to help save someone else some time... I have to give credit to DataTables.net they have pretty good support but the documentation can be tricky.
After doing some more digging and with the guidence of the DataTables.Net Forum. Heres what I came up with. I ended up using the DataTables.Net Downloader to Generate all the CSS and Js Files into 2 bundles files with all the features that I was trying to add. So instead of DLing them individually It was just 2 files in the bundles. Heres the Downloader Link
Then the Bundles ended up like this.
bundles.Add(new ScriptBundle("~/bundles/DataTables").Include(
"~/DataTables/dataTables.min.js"
));
bundles.Add(new StyleBundle("~/Content/DataTables").Include(
"~/DataTables/dataTables.min.css"
))
Then on the Layout page or your HTML page where the tables are going to live. include the scripts and content
Place Content in the Head.
#Styles.Render("~/Content/DataTables")
Place the Script before the closing tag
#Scripts.Render("~/bundles/DataTables")
On the page my HTML was pretty much Unchanged. I did add the BootStrap CSS Classes for tables.
<table id="MyTable" class="table table-striped table-bordered table-hover table-condensed" style="width:100%">
<thead>
<tr>
<th>
Center
</th>
<th>
Account
</th>
<th>
Ledger
</th>
</tr>
</thead>
<tbody>
In the Script Section for that page.
Couple things here... the Documentation is kinda scattered but , there are a few different ways to set this up. For example there 'May' be a Ajax section, and the buttons can either be declared directly or instantiated separately with the New constructor.
<script type="text/javascript">
$(function () {
var table = $('#MyTable').DataTable({
ajax: {
url: 'Ajax Call for data',
dataSrc: 'data'
},
columns: [
{ data: 'Center' },
{ data: 'Account' },
{ data: 'Ledger' }
]
});
new $.fn.dataTable.Buttons( table, {
buttons: [
'copy', 'excel', 'pdf'
]
});
table.buttons( 0, null ).container().prependTo(
table.table().container()
);
});
</script>
I am trying to understand why Datatables (https://datatables.net/) Responsive wouldn't be working. Everything else is working great, paging, searching, ordering, etc.. but not responsive?
Below is what I have.
Bootstrap v3.3.6
$(function () {
$('#ManageUsers').DataTable({
paging: true,
lengthChange: true,
searching: true,
ordering: true,
info: true,
autoWidth: true,
responsive: true
});
});
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<!-- JS -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script>
<!-- CODE -->
<table id="ManageUsers" class="table table-bordered table-striped display responsive">
<thead>
<tr>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>
Any help will be greatly appreciated.
Try loading the libraries in this order like in the DEMO.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="datatables#*" data-semver="1.10.12" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script>
<link href="//cdn.datatables.net/responsive/2.1.1/css/dataTables.responsive.css"/>
<link data-require="datatables#*" data-semver="1.10.12" rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
You are missing
https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css in
your header and missed nowrap in class according to their examples.
I personally would suggest to initiate responsive dataTable via javascript as
it will provide more options to customise your UI.
Please refer to these links for reference
https://datatables.net/extensions/responsive/examples/initialisation/default.html
https://datatables.net/extensions/responsive/examples/initialisation/className.html
https://datatables.net/extensions/responsive/examples/initialisation/option.html
Try using width=100% in table. Not pretty, but it worked for me.
Just use this script at the bottom of your file
<script>
$(function () {
$("#manageUsers").DataTable({
"bLengthChange": false,
"bPaginate": true,
"bInfo": false,
"autoWidth": false,
"order": [[0, "desc"]],
responsive: true,
"processing": true,
"serverSide": false,
"sAjaxSource": "data.js",
"columns": [
{ "data": "name[, ]" },
{ "data": "hr.0" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "hr.2" },
{ "data": "hr.1" }
});
</script>
It worked for me.
I want to populate a datatable from a php call in my $(document).ready function, but I don't want to configure the table for server side processing (I want subsequent sorting/filtering/sorting to happen client side). Below is my current code. Note: I ran the php On the server and pasted the output into a text file. If I use the path to the text file as my url, I get the intended result. So I think that datatables is trying to read my php file as json, and, of course failing. How do I get it to use the output from the php file instead of the php file itself?
Code:
<html>
<head>
<title>NCompass Failed Fax Monitor</title>
<link rel="stylesheet" type="text/css" href="jQuery/datatables.min.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#faxList').DataTable({
ajax: {
url: 'php/Data.php',
dataSrc: 'transactions'
},
columns: [
{ data: 'PROCESS_DATE' },
{ data: 'PROCESS_STATUS' },
{ data: 'PDF_FILE_NAME' },
{ data: 'REF_ID' },
{ data: 'ADDITIONAL_INFO' }
]
});
});
</script>
</head>
<body>
<h2>NCompass Failed Fax Monitor</h2>
<br>
<table width="100%" class="display" cellspacing="0" id="faxList">
<thead>
<tr>
<th>Process Date</th>
<th>Status</th>
<th>PDF File</th>
<th>Reference ID</th>
<th>Error Description</th>
</tr>
</thead>
</table>
</body>
</html>
I want to implement ordering but it is not working.
Can you tell me the reason why? What do I need to change to make it work so that my data is displayed in order?
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Spring pagination using data tables</title>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- <script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> -->
<script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
//Plug-in to fetch page data
jQuery.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages": oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
};
};
$(document).ready(function() {
var table=$("#table").DataTable( {
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"scrollY":"120px",
"scrollCollapse": true,
"order": [[ 3, "desc" ]],
"oLanguage": {
"oPaginate": {
"sNext": '>',
"sLast": '»',
"sFirst": '«',
"sPrevious": '<'
}
},
"sort": "position",
//bStateSave variable you can use to save state on client cookies: set value "true"
"bStateSave": false,
//Default: Page display length
"iDisplayLength": 10,
//We will use below variable to track page number on server side(For more information visit: http://legacy.datatables.net/usage/options#iDisplayStart)
"iDisplayStart": 0,
"fnDrawCallback": function () {
$('table #table td').bind('mouseenter', function () { $(this).parent().children().each(function(){$(this).addClass('datatable');}); });
$('table #table td').bind('mouseleave', function () { $(this).parent().children().each(function(){$(this).removeClass('datatable');}); });
//Get page numer on client. Please note: number start from 0 So
//for the first page you will see 0 second page 1 third page 2...
//alert("Current page number: "+((this.fnPagingInfo().iPage)+1));
},
"sAjaxSource": "${pageContext.request.contextPath}/EmployeeData",
"aoColumns": [
{ "mData": "firstName" },
{ "mData": "lastName" },
{ "mData": "emp_Id" },
{ "mData": "email_ID" },
{ "mData": "phone_No" },
{ "mData": "city" },
{ "mData": "Edit",
render:function(data ,type,row){
return 'Edit';
},
},
{ "mData": "View",
render:function(data ,type,row){
return 'View';
},
},
{ "mData": "Delete",
render:function(data ,type,row){
/* return '<button><a id="btn" href="${pageContext.request.contextPath}/delete?emp_Id='+row.emp_Id+'">Delete</a></button>'; */
/* return Delete */
return 'Delete';
/* return '<button id="delete_Id" empId='+row.emp_Id+'>Delete</button>'; */
/* return 'Delete'; */
},
},
]
}
);
} );
function deleteEmp(emp_Id){
if(confirm("are you sure want to delete this ID : "+emp_Id)){
window.location = "${pageContext.request.contextPath}/deleteEmp?emp_Id="+emp_Id;
}
else{
return false;
}
}
</script>
<style>
#table{
align:center;
}
#btn{
text-decoration:none;
}
#h{
text-align:center;
color:blue;
}
#link3{
float:right;
margin-right:5px;
}
#link4{
float:right;
}
#brk{
height: 10px;
}
.datatable{
background-color: #ddd !important;
}
</style>
</head>
<body>
<form:form action="" method="GET">
<h2 id="h" >Employee Details<br><br></h2>
<div>
Add New Employee
<a id="link4" href="${pageContext.request.contextPath}/bulkExport">EmployeeBulkExport</a>
<a id="link3" href="${pageContext.request.contextPath}/fileUploadForm">EmployeeImport </a>
</div>
<div id = "brk"></div>
<table width="100%" style="border: 3px;background: rgb(243, 244, 248);"><tr><td>
<table id="table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>firstName</th>
<th>lastName</th>
<th>emp_Id</th>
<th>email_Id</th>
<th>phone_No</th>
<th>City</th>
<th>Edit</th>
<th>View</th>
<th>Delete</th>
</tr>
</thead>
</table>
</td></tr></table>
</form:form>
</body>
</html>
CAUSE
You have server-side processing enabled with "bServerSide": true. In this mode searching, filtering and pagination should be done on the server-side.
Most likely your server-side script (${pageContext.request.contextPath}/EmployeeData) isn't programmed to do so, that's why you don't see ordering/filtering/pagination working.
See manual for more information on processing modes.
SOLUTION
Remove "bServerSide": true to enable client-side processing.
Alternatively, if you have a large dataset you may look into implementing ordering/filtering on the server based on supplied parameters.
I have written a small sample program to bind JSON data in a grid using Datatable
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
<table id="example">
<thead>
<tr><th class="site_name">symbol</th><th>qunatity </th></tr>
</thead>
<tbody>
</tbody>
</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(){
var r = [
{"symbol":"BPCL","qunatity":"1222"},{"symbol":"HDCF","qunatity":"2333"}
]
$("##example").dataTable({
"aaData":r,
"bJQueryUI": true,
"bDestroy": true,
"iDisplayLength": 50,
"bProcessing": true,
"aaSorting": [[0, 'desc']],
"aoColumns": [
{ "mData": "symbol" },
{ "mData": "qunatity" }
],
});
})
</script>
</body>
</html>
When i ran this program except the header , no data is being displayed , could you please let me know what might the cause for it ??
You have an extra # in $("##example").dataTable({