i want to be to display child records when i click a button . The data is displayed as a table.
I have created a partial view that will display the records.
I have created a controller action method to return the partial view.
I have also added javascript code on the main page/view to call and load the dialog .
Here is the code for the main page/view
#model IEnumerable<LearningApp.ViewModel.Requistion>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
#{
ViewBag.Title = "Index";
}
</head>
<body>
<h4>Requistion List</h4>
<hr />
<table class ="table table-bordered"cellpadding="0" cellspacing="0" id="RequestGrid">
<tr>
<th>Request #</th>
<th>Date Made</th>
<th>Employee Name</th>
<th>Purpose</th>
<th>Directorate</th>
<th>Station</th>
<th></th>
</tr>
#foreach (var r in Model)
{
<tr>
<td>#r.RequestID</td>
<td>#r.RequestDate</td>
<td>#r.EmployeeName</td>
<td>#r.Purpose</td>
<td>#r.Directorate</td>
<td>#r.Station</td>
<td> <button type="button"class="ids" value="View Details" data-id="#r.RequestID"> View Details</button></td>
</tr>
}
</table>
<div id="dialog" title="View Requistion Details" style="overflow: hidden;">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
width: 400,
modal: true
});
$('.ids').click(function () {
var requestid = $(this).data('id');
//alert("You clicked me...again" + requestid)
//var productId = $(this).data('id');
//alert(requestid)
$.ajax({
type: "POST",
url: "/tblRequistions/GetRequistionDetail",
data: '{RequestID: "' + requestid + '" }',
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (response) {
$('#dialog').html(response);
$('#dialog').dialog('open');
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
</body>
</html>
Here is the controller method to return partial view.
[HttpPost]
public ActionResult GetRequistionDetail(int RequestID)
{
List<RequistionDetails> listofdetails = new List<RequistionDetails>();
listofdetails = r.getAllRequistionsDetails(RequestID);
return PartialView("_details",listofdetails);
}
If remove the portion of code below from the main view, and i run the page and i click on the button (view details) the ajax call to the controller is made and the correct parameter is passed.
$("#dialog").dialog({
autoOpen: false,
width: 400,
modal: true
});
If i leave it, nothing happens(ajax call not made).
I have tried to change autoOpen: True to see whether the dialog can open when the view loads, it does not load.
So i suspect the problem to be with the dialog.
Any reason why the dialog code is not working.?
Ronald
Take a look at this code:
$(function() {
function getDataById(u, n, tObj) {
if (n == undefined || isNaN(n)) {
return false;
}
var results = false;
console.log("AJAX, making request:", u, "ID:", n);
$.ajax({
type: "POST",
url: u,
data: {
RequestID: n
},
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function(r) {
results = r;
},
error: function(x, s, e) {
console.log("AJAX", s, e, x);
}
});
if (tObj != undefined) {
tObj.html(results);
}
return results;
}
$("#dialog").dialog({
autoOpen: false,
width: 400,
modal: true
});
$('.ids').click(function() {
var rHtml = getDataById("/tblRequistions/GetRequistionDetail", $(this).data('id'));
if (rHtml) {
$("#dialog").html(rHtml).dialog("open");
} else {
// Proof of Concept / Example Data
$("#dialog").html("**SAMPLE**<br />ID: 1, Date: 12/12/12, Name: Homer Simpson, Request: Donut, Director: Mr. Burns, Location: Plant").dialog("open");
}
});
});
<h4>Requistion List</h4>
<hr />
<table class="table table-bordered" cellpadding="0" cellspacing="0" id="RequestGrid">
<tr>
<th>Request #</th>
<th>Date Made</th>
<th>Employee Name</th>
<th>Purpose</th>
<th>Directorate</th>
<th>Station</th>
<th></th>
</tr>
<tr>
<td>1</td>
<td>12/12/12</td>
<td>Homer Simpson</td>
<td>Donut</td>
<td>Mr. Burns</td>
<td>Plant</td>
<td> <button type="button" class="ids" value="View Details" data-id="1"> View Details</button></td>
</tr>
</table>
<div id="dialog" title="View Requistion Details" style="overflow: hidden;">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
I cannot test with AJAX. So I included Sample Data for the dialog as a proof of concept, yet the script does try to connect to AJAX and shows the error to console.
It's written to be used in a few ways. You can also do this:
getDataById("/tblRequistions/GetRequistionDetail", $(this).data('id'), $("#dialog"));
$("#dialog").dialog("open");
I don't advise this method. If the AJAX call is slow or details don't return, the dialog could open with no data.
Related
I am getting some data from backend server and trying to put in the bootstrap table every 5 seconds. It is not able to display in table although I can clearly see the json object coming from backend in my console. I tried using refresh, load and append as well as first argument to bootstrapTable function but it is not helping. I want the new data to append to existing data when it comes from the backend in json format but the table is displaying as completely empty in the UI.
Javascript file
$(document).ready(function() {
getUpdates();
function getUpdates() {
$.ajax({
type: "GET",
contentType: "application/json",
url: "/getUpdates",
dataType: 'json',
cache: false,
timeout: 600000,
success: function (output) {
// var $table = $('#table');
$('#table1').bootstrapTable('refresh', {
data: output
});
console.log("SUCCESS : ", output); //this display correctly in console
},
error: function (e) {
var json = "<h4>Response:</h4><pre>"
+ e.responseText + "</pre>";
console.log("ERROR : ", e +"Response Text: "+ e.responseText);
// $("#btn-update").prop("disabled", false);
},
complete: function() {
// Schedule the next request when the current one's complete
setTimeout(getUpdates, 5000); // The interval set to 5 seconds
}
});
};
});
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Updates through messaging</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.14.2/dist/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<div class="container" style="min-height: 500px">
<div class="starter-template">
<h1>CDC Consumer Example </h1>
<div class="container">
<table id="table1" data-height="450">
<thead>
<tr>
<th data-field="id">Id</th>
<th data-field="oldValue">Old Value</th>
<th data-field="newValue">New Value</th>
<th data-field="tableName">Table Name</th>
<th data-field="columnName">Column Name</th>
<th data-field="timestamp">Timestamp</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script type="text/javascript"src="webjars/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="javascript/entry.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.14.2/dist/bootstrap-table.min.js"></script>
</body>
</html>
from looking at that libraries documentation I don't think that's how the refresh method works.
try something like this
$(document).ready(function () {
$('#table1').bootstrapTable({
url: '/getUpdates',
onLoadSuccess(data) {
setTimeout(getUpdates, 5000)
}
})
function getUpdates() {
$('#table1').bootstrapTable('refresh')
};
});
you have to use load not refresh in $('#table1').bootstrapTable('refresh',{data: output}); and just give your new data as a second parameter, for better understand you can see my example below(it's load every 5 seconds):
var mydata = [
{ id: 6521761346336241,
columnName: "sys_role_cd1",
newValue: "PARTY1",
oldValue: "PART1",
tableName: "entries1",
timestamp: 15550157197331
}];
$('#table1').bootstrapTable({data: mydata});
window.setInterval(function(){
//you can call your ajax and reload your table here
$(function () {
mydata.push({
id: 6521761346336242,
columnName: "sys_role_cd2",
newValue: "PARTY2",
oldValue: "PART2",
tableName: "entries2",
timestamp: 15550157197332
});
$('#table1').bootstrapTable('load',mydata);
});
//console.log("data reload",mydata);
}, 5000);
// to stop this loop you can use `clearInterval()`
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
<div class="container" style="min-height: 500px">
<div class="starter-template">
<h1>CDC Consumer Example </h1>
<div class="container">
<table id="table1" data-height="450">
<thead>
<tr>
<th data-field="id">Id</th>
<th data-field="oldValue">Old Value</th>
<th data-field="newValue">New Value</th>
<th data-field="tableName">Table Name</th>
<th data-field="columnName">Column Name</th>
<th data-field="timestamp">Timestamp</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
I put it in the variable already but it still gives me an error and it says uncaught reference error oTable is not defined
<script type="text/javascript">
$(document).ready(function(){
$("#test").click(function(){
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts",
success: function( result ) {
var oTable = $("#datatable").DataTable({
processing: true,
data: result,
columns: [
{data: 'id'},
{data: 'title'}
]
});
}
});
});
$("#reload").click(function(){
oTable.DataTable().ajax.reload();
});
});
</script>
here is my html
<table id="datatable">
<thead>
<tr>
<th>ID</th>
<th>TITLE</th>
</tr>
</thead>
</table>
please help me Thanks
Hope this will work for you
Use Datatable Method to Load ajax,
No need to Initiate again to reload Datatble use oTable.ajax.reload();
I changed oTable to Global variable
$(document).ready(function () {
$("#reload").click(function () {
oTable.ajax.reload();
});
$("#test").click(function () {
window.oTable = $('#datatable').DataTable({
"ajax": {
"url": "https://jsonplaceholder.typicode.com/posts",
"dataSrc": ""
},
"columns": [{
"data": "id"
},
{
"data": "title"
},
]
});
});
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<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" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type='text/javascript'>
</script>
</head>
<body>
<button id="reload">
reaload
</button>
<button id="test">
test
</button>
<div class="container">
<table id="datatable">
<tr>
<th>ID</th>
<th>TITLE</th>
</tr>
</thead>
</table>
</div>
your oTable variable definition was on onSuccess callback, so it can't call from outside of onSuccess callback scope
I have been trying to integrate a table into my website which pulls data from my database into the table on the website.
I have read all the possible solutions on the internet and couldnt fix the issue yet.
I am putting my code below to have a look.
Please point out where I'm goiing wrong in it and what can i do for it to work.
Otherwise suggest me another option to go for the same function of loading data from the database into the tables inti the HTML site.
The declarations that i have used before the code.
<!--Import jQuery before export.js-->
<script type="text/javascript" src="//code.jquery.com/jquery.js"></script>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<!--Data Table-->
<script type="text/javascript" src=" //cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=" //cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<!--Export table buttons-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js" ></script>
<script type="text/javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<!--Export table button CSS-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
This is my HTML code.
<div style="width:90%; margin:0 auto;">
<table id="myTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
</table>
</div>
This is my Javascript code.
<script>
$(document).ready(function () {
$('#myTable').DataTable({
"ajax": {
"url": "/api/medical_inventory/",
"type": "GET",
"datatype": "json"
},
"columns" : [
{ "data": "Id", "autoWidth": true },
{ "data": "Name", "autoWidth": true },
]
});
});
</script>
Any help is appreciated.
Thanks in advance.
You probably want to have the ajax call actually return data, and then pass that on to DataTable. As an example:
$.ajax({
url: "/api/medical_inventory/",
type: "GET",
datatype: "json",
success: function(data){
$("#myTable").DataTable({
data: data,
columns : [
{ title: "Id", className: "myClass" },
{ title: "Name", className: "otherClass" },
]
});
}
});
I try to do a submit ajax with ASP .net and jquery but he never fire d«the event, I already try with this two examples and he never fire the event alert.
<form id="form">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
#Html.TextBoxFor(m => m.VatNumber,new { #class = "form-control", #id="VatNumber"})
#Html.ValidationMessage("VatNumber")
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Check VAT" />
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#form').submit(function () {
alert("cheguei");
$.ajax({
url: '#Url.Action("CheckVat")',
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
VatNumber: $('#VatNumber').val(),
}),
success: function (result) {
alert("success");
},
error: function (result) {
alert("error");
}
});
return false;
});
});
$(function () {
$('#form').submit(function (event) {
alert("cheguei");
event.preventDefault(); // Prevent the form from submitting via the browser
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function (data) {
// Optionally alert the user of success here...
}).fail(function (data) {
// Optionally alert the user of an error here...
});
});
});
</script>
I figure out : I have to include the scripts in the Head section and the problem is fixed.
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/bootstrap.min.css")
#*#Styles.Render("~/Content/css")*#
#Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/jquery-3.1.0.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</head>
I am using a 3-tier architecture in my project, which has the following structure :
Web Pages(has reference to BusinessLogic(C# Class)
Business Logic(has reference to the DataAccess(C# class) contains all the methods for data access.
DataAccess - contains methods for database operations(Insert,Update,Delete,etc)
Now in my website, I am using a MasterPage-ContentPage relationship. As I have learned I am loading all my scripts and CSS for the individual pages in my master page.
Here is my bottom section(scripts references) of the Master Page :
<!-- jQuery 2.1.4 -->
<script type="text/javascript" src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- SlimScroll -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<!-- FastClick -->
<script type="text/javascript" src='../../plugins/fastclick/fastclick.min.js'></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js" type="text/javascript"></script>
<script src="dist/js/toastr.js" type="text/javascript"></script>
<!-- Demo -->
<script src="../../dist/js/demo.js" type="text/javascript"></script>
<!-- DATA TABES SCRIPT -->
<script type="text/javascript" src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$('#example').dataTable();
</script>
Here is the top section(CSS references) of my master page :
<!-- Bootstrap 3.3.4 -->
<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- Font Awesome Icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<link href="dist/css/toastr.css" rel="stylesheet" type="text/css" />
<link href="media/css/jquery.dataTables.css" rel="stylesheet" />
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link href="../../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
As I have seen from the official jQuery DataTable tutorial page, this is the way I should initialize my DataTable in my script.
Still when I run the CSS works as expected, but the JS doesn't work as I tried to use the functions like sorting,searching,etc. - NOTHING WORKS.
This is my content page for reference :
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="content-wrapper">
<div class="content">
<div class="box">
<div class="box-header">
<h3 class="box-title">Products : </h3>
</div>
<div class="box-body">
<asp:Repeater ID="rptr" runat="server">
<HeaderTemplate>
<table id="example" class="table table-bordered table-striped">
<thead>
<tr>
<th >Sr. No</th>
<th>Name</th>
<th>Category</th>
<th>Company</th>
<th>Price</th>
<th>In Stock</th>
<th>Min. Qty</th>
<th>Date Created</th>
<th></th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tbody>
<tr>
<td><%# Container.ItemIndex + 1 %></td>
<td><%# Eval("ProdName") %></td>
<td><%# Eval("CategoryName") %></td>
<td><%# Eval("CompanyName") %></td>
<td><%# Eval("ProdPrice") %></td>
<td><%# Eval("QuantityInStock")%></td>
<td><%# Eval("MinQuantity")%></td>
<td><%# Eval("DateCreated")%></td>
<td><a href='<%# "ProductDetails.aspx?ID=" + Eval("ProductID") %>'>View</a></td>
</tr>
</tbody>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</div>
</div>
</div>
</asp:Content>
and this is my PageLoad method. There are no other methods for the Page except PageLoad :
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Session["user"] != null)
{
rptr.DataSource = new ProductLogic().fillProductTable();
rptr.DataBind();
}
else
{
Response.Redirect("Login.aspx?url=ProductDetails.aspx");
}
}
}
I do not know what am I doing wrong. The data is being loaded correctly, the CSS is but the JS doesn't work at all. What is wrong that I am doing here ?
I believe there is ufcourse some way other than I am mentioning in my answer to use the jQuery DataTable in your ASP.NET web-application. But I found this the easiest way possible.
Step-1) Create a web service in your website.In the code below I am converting a datatable returned from my query result into a JSON Array with one of the utilities I found on the internet. Here is the code for the WebService :
/// <summary>
/// Summary description for ProductDetailsWebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class ProductDetailsWebService : System.Web.Services.WebService
{
[WebMethod]
public void GetProductDetails()
{
ProductLogic prodLogic = new ProductLogic();
DataTable dt = prodLogic.fillProductTable();
JavaScriptSerializer serializer = new JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
Context.Response.Write(serializer.Serialize(rows));
}
}
Step-2) The HTML looks something very simple with a basic <thead> tag containing several <tr>. Note the id you give here is important as this id will be used in JS to find the table element. Here is the HTML :
<table id="datatable" class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Company</th>
<th>Price</th>
<th>In Stock</th>
<th>Min. Qty</th>
<th>Date Created</th>
<th>More</th>
</tr>
</thead>
</table>
Step-3) The JS :
<!-- DATA TABES SCRIPT -->
<script type="text/javascript" src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$.ajax({
url: 'ProductDetailsWebService.asmx/GetProductDetails',
method: 'post',
dataType: 'json',
success: function (data) {
var dataTableInstance = $('#datatable').dataTable({
data: data,
'scrollY': 300,
columns: [
{ 'data': 'ProdName' },
{ 'data': 'CategoryName' },
{ 'data': 'CompanyName' },
{
'data': 'ProdPrice',
'render' : $.fn.dataTable.render.number(',', '.', 0)
},
{ 'data': 'QuantityInStock' },
{ 'data': 'MinQuantity' },
{
'data': 'DateCreated',
'render': function (jsonDate) {
var date = new Date(parseInt(jsonDate.substr(6)));
var month = date.getMonth() + 1;
return date.getDate() + "/" + month + "/" + date.getFullYear();
}
},
{
'data': 'ProductID',
'searchable' : false,
'sortable' : false,
'render': function (productID) {
return 'Full Details...';
}
}
]
});
}
});
</script>
NOTE: You need to have only the CSS and the JS for datatable which can be found at the jQuery Datable Tutorial Page.
Very Important Video tutorial for the same can be found at Kudvenkat's jQuery Tutorial series on YouTube.