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.
Related
I don't know, I can't read some JSON file ou put a table which read JSON data (internal or external source)
Does someone have an idea?
Here are my link and script I used
<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://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
Here is my script where I create the table, I use data-URL to load the data from a local JSON file
<table id="table" data-toggle="table" data-height="460" data-search="true" data-url="data.json">
<thead>
<tr>
<th data-field="id">#</th>
<th data-field="oeuvre" data-search-formatter="false" data-formatter="nameFormatter">Oeuvres</th>
<th data-field="type" data-formatter="nameFormatter">Type</th>
<th data-field="artist" data-formatter="nameFormatter">Artiste</th>
<th data-field="sheet" data-formatter="nameFormatter">Fiche</th>
</tr>
</thead>
</table>
<script>
$table.bootstrapTable('refresh',{data: data})
})
function nameFormatter(value) {
return 'Formatted ' + value
}
var $table = $('#table')
$(function() {
var data = [
{"id":1,"oeuvre":"choppe","type":"Ambre","artist":"Etienne","sheet":"<a href=\"description.html\">"}
]
$table.bootstrapTable({data: data})
})
</script>
I really don't know why it doesn't work...
thanks in advance
If you want to load a local json file, try like below.
function nameFormatter(value) {
return 'Formatted ' + value
}
var data = [
{"id":1,"oeuvre":"choppe","type":"Ambre","artist":"Etienne","sheet":"<a href=\"description.html\">"}
]
$("#table").bootstrapTable({data: data})
And remove data attribute data-url="data.json" from the table.
You can run the snippet below to see the results.
function nameFormatter(value) {
return 'Formatted ' + value
}
var data = [
{"id":1,"oeuvre":"choppe","type":"Ambre","artist":"Etienne","sheet":"<a href=\"description.html\">"}
]
$("#table").bootstrapTable({data: data})
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
<table id="table" data-toggle="table" data-height="460" data-search="true">
<thead>
<tr>
<th data-field="id">#</th>
<th data-field="oeuvre" data-search-formatter="false" data-formatter="nameFormatter">Oeuvres</th>
<th data-field="type" data-formatter="nameFormatter">Type</th>
<th data-field="artist" data-formatter="nameFormatter">Artiste</th>
<th data-field="sheet" data-formatter="nameFormatter">Fiche</th>
</tr>
</thead>
</table>
If you want to load from an external source, your function should contain only the formatter function.
Try the snippet below to see the results.
function nameFormatter(value) {
return 'Formatted ' + value
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
<table id="table" data-toggle="table" data-height="460" data-search="true" data-url="https://api.myjson.com/bins/q9n5g">
<thead>
<tr>
<th data-field="id">#</th>
<th data-field="oeuvre" data-search-formatter="false" data-formatter="nameFormatter">Oeuvres</th>
<th data-field="type" data-formatter="nameFormatter">Type</th>
<th data-field="artist" data-formatter="nameFormatter">Artiste</th>
<th data-field="sheet" data-formatter="nameFormatter">Fiche</th>
</tr>
</thead>
</table>
Remove the data-toggle attribute if you are not loading data from external json file.
It seems any calls to $('#table').bootstrapTable() are completely ignored when data-toggle is enabled and data is not rendered.
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 am using Angularjs as the frontend and spring mvc as the backened for my application. I am using datatables for displaying records. The problem I am facing is datatables works sometimes and sometimes doesn't.
After performing edit or delete or any dynamic operations the datatable loses its shape like pagination, filtration, search. Even though there will be data but it shows there are no records but still it displays records with no pagination.
I tried draw() and reload methods in the script but nothing seemed to work.
In html pages my order of loading css and js files are like this
<html lang="en" data-ng-app="adminApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/css/bootstrap.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/css/Custom-Style.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/font-awesome-4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/font-awesome-4.0.3/css/font-awesome.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" media="screen" ref="resources/front/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="resources/angular/angulars-datetime-picker.css" />
<link rel="stylesheet" href="resources/front/css/spinner.css">
<script src="resources/front/js/jquery-1.12.4.js" type="text/javascript"></script>
<script src="resources/front/js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" src="resources/front/js/Custom-js.js"></script>
<script src="resources/front/js/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript" src="resources/front/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="resources/front/js/dataTables.responsive.min.js"></script>
</head>
</html>
This is the script where I tried everything. I have placed this inside the head tag. I have placed all the above code in every html file.
<script>
$(document).ready(function() {
$('#example').DataTable();
});
</script>
Here is how i am using ng-repeat for displaying data in table
<div class="TableBox">
<table id="example" class="display responsive nowrap"
cellspacing="0" width="100%" >
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="example"
rowspan="1" colspan="1" aria-sort="ascending" aria-label="" >
SlNo
</th>
<th class="sorting_asc" tabindex="0" aria-controls="example"
rowspan="1" colspan="1" aria-sort="ascending"
aria-label="">Name</th>
</tr>
</thead>
<tbody>
<tr role="row" class="even" data-ng-repeat="student in students">
<td>{{$index + 1}}</td>
<td>{{student.studentName}}
</td>
</tr>
</tbody>
</table>
</div>
Here is my AngularController.js
$scope.getAllStudents = function()
{
AdminStudentService.getAllStudents().then(function(response)
{
$scope.students=response.data;
});
}
Here is my update method
$scope.updateStudent = function(student)
{
$scope.editstudentForm.$submitted= true;
if($scope.editstudentForm.$valid)
{
AdminStudentService.updateStudent(student).then(function(response)
{
if(response.data=="success")
{
$scope.editstudentForm.$submitted= false;
$window.scrollTo(0,0);
$scope.student = {};
$scope.getAllStudents();
$scope.successmessage1="Student Details Updated!;
$timeout(function()
{
$scope.closeeditStudent();
$scope.successmessage1="";
}, 1500);
}
});
}
}
Am I missing something in the script or do I need to add something?
I'm providing you with .js function that will help you understand datatables.
$scope.getAllReports = function() {
$http({
method : 'GET',
url : '/getReport'
}).success(function(data, status, headers, config) {
$scope.test = data;
$('#stack').DataTable().clear().draw();
angular.forEach($scope.test, function(test) {
$('#mantisi').DataTable().row.add([
test.t0,
test.t1,
test.t2,
test.t3,
test.t4,
test.t5
]).draw();
});
});
};
Also here is code from .html:
<table id="stack" class="table table-bordered table-striped" ng-init="getAllReports()">
<thead>
<tr>
<th>t0</th>
<th>t1</th>
<th>t2</th>
<th>t3</th>
<th>t4</th>
<th>t5</th>
</tr>
</thead>
<tbody></tbody>
</table>
And also a .js for DT:
$('#stack').DataTable({
"order": [[ 0, "asc" ]],
"language": {
url: '/datatables/datatables.hr.json'
},
"drawCallback": function( settings ) {
$(".btn-excel-custom").removeClass("dt-button buttons-excel buttons-html5");
$(".btn-default-custom").removeClass("dt-button").addClass("btn btn-default");
},
"bPaginate": false,
dom: 'Bfrt',
buttons: [{
text:"Export to Excel",
extend: 'excel',
className: 'btn btn-excel-custom'
}]
});
These are 3 main snippets for decent show-up of jQuery datatables. Also, I've created special methods provided by DT API in last snippet.
I am new to bootstrap and simply trying to replicate several examples of loading data into a bootstrap table, but my data does not show up. Here is the html from jsfiddle
<table class="table" id="table">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
And here is the javascript:
var $table = $('#table');
var mydata = [{
"id": 0,
"name": "test0",
"price": "$0"
}];
$(function() {
$('#table').bootstrapTable(
data: mydata)
);
});
The header shows up fine, but the data does not. Here is a link to the jsFiddle.
bootstrapTable does not come with bootstrap. you need to include it.
https://jsfiddle.net/9g7c34rb/1/
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
I am currently trying to learn and make use of DataTable in ASP.NET. However, I couldn't do the sorting function out. I did the code, I've the icons out but I am not able to click it or trigger any events. Am I missing out some javascript or am I supposed to do the function out myself?
I am referencing to this website https://datatables.net/examples/basic_init/table_sorting.html
Here's the code that I've tried
Masterpage (only scripts)
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<!-- Custom CSS -->
<link href="Content/sb-admin.css" rel="stylesheet" />
<link href="Content/customCSS.css" rel="stylesheet" />
<link href="Content/DataTables-1.10.12/media/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="Content/DataTables-1.10.12/media/css/jquery.dataTables.min.css" rel="stylesheet" />
<!-- Morris Charts CSS -->
<link href="Content/plugins/morris.css" rel="stylesheet" />
<!-- Custom Fonts -->
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap Core JavaScript -->
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.12.3.js"></script>
<script src="Content/DataTables-1.10.12/media/js/jquery.dataTables.min.js"></script>
<script src="Content/DataTables-1.10.12/media/js/dataTables.bootstrap.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="Scripts/plugins/morris/raphael.min.js"></script>
<script src="Scripts/plugins/morris/morris.min.js"></script>
<script src="Scripts/plugins/morris/morris-data.js"></script>
ASPX
<script>
function onPageLoad() {
$(document).on("dblclick", "#tableCourseStructure tbody tr", function () {
var $this = $(this);
var row = $this.closest("tr");
row.find('td:eq(1)');
var courseCode = row.find('td:first').text();
window.location.href = "UpdateCourse.aspx?CourseCode=" + courseCode;
});
}
</script>
<table id="tableCourseStructure" class="table table-striped table-bordered dataTable no-footer hover display" role="grid">
<thead>
<tr role="row">
<th>Course Code</th>
<th>Course Version</th>
<th>Course Title</th>
<th>Last Modified Date</th>
</tr>
</thead>
<tbody>
<%=getCourseData()%>
</tbody>
</table>
ASPX.CS
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
retrieveBAL retrieveBAL = new retrieveBAL();
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "onPageLoad();", true);
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "sortingTable();", true);
}
}
protected void ddlCourseCategory_SelectedIndexChanged(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "onPageLoad();", true);
}
public string getCourseData()
{
string data = "";
retrieveBAL retrieveBAL = new retrieveBAL();
foreach (DataRow row in retrieveBAL.retrieveCourseInfoByCategory(ddlCourseCategory.SelectedValue).Tables[0].Rows)
{
data += "<tr><td>" + row["courseCode"].ToString() + "</td><td>" + row["courseVersion"].ToString() + "</td><td>" + row["courseTitle"].ToString() + "</td><td>" + row["LastModifiedDate"].ToString() + "</td></tr>";
}
return data;
}
It seems that you are missing the actual DataTable() function call that will turn your html table into a DataTable:
$('#tableCourseStructure').DataTable();
Your css may make it look like a DataTable but without the above you will not get any functionality.