JQuery DataTable Not Working [HELP PLEASE]
JQuery DataTable Not Working [HELP PLEASE]
Trebor
Posts: 3Questions: 0Answers: 0
Hi Guys,
I've been searching google and trying all the sample that I found on how to bind the data from database to jquery datatable (the basic one), yet I can't make it to work. I don't know what's wrong with my code since I just follow the samples. Here are my code:
Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using JQueryDataTable.Models;
namespace JQueryDataTable.Controllers
{
public class StudentController : Controller
{
private string ConnString = ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString;
public ActionResult Index()
{
return View();
}
public ActionResult AjaxHandler(JQueryDataTableParamModel param)
{
DataTable studTable = null;
SqlDataAdapter studAdapter = null;
IList<StudentModel> Student = new List<StudentModel>();
using (SqlConnection dbConnection = new SqlConnection(ConnString))
{
using (SqlCommand studCmd = new SqlCommand("SELECT * FROM STUDENT", dbConnection))
{
dbConnection.Open();
studAdapter = new SqlDataAdapter(studCmd);
studTable = new DataTable();
studAdapter.Fill(studTable);
for (int row = 0; row < studTable.Rows.Count; row++)
{
Student.Add(new StudentModel()
{
StudentID = studTable.Rows[row]["ID"].ToString(),
StudentName = studTable.Rows[row]["Name"].ToString(),
StudentEmail = studTable.Rows[row]["Email"].ToString(),
StudentAge = studTable.Rows[row]["Age"].ToString()
});
}
dbConnection.Close();
}
}
var allStudents = Student;
IEnumerable<StudentModel> filterStudent = allStudents;
var result = from p in allStudents
select new[] { p.StudentID, p.StudentName, p.StudentEmail, p.StudentAge };
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = allStudents.Count(),
iTotalDisplayRecords = allStudents.Count(),
aaData = result.ToList()
}, JsonRequestBehavior.AllowGet);
}
}
}
View
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>AjaxHandler</title>
<link rel="Stylesheet" href="../../Content/jquery.dataTables.css" />
<link rel="Stylesheet" href="../../Content/jquery.dataTables.min.css" />
<link rel="Stylesheet" href="../../Content/jquery.dataTables_themeroller.css" />
</head>
<body>
<div>
<table id="tblStudent" class="display">
<thead>
<tr>
<th>StudentID</th>
<th>StudentName</th>
<th>StudentEmail</th>
<th>StudentAge</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th>StudentID</th>
<th>StudentName</th>
<th>StudentEmail</th>
<th>StudentAge</th>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript" src="../../Scripts/jquery-1.11.2.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.dataTables.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.js"></script>
<script type="text/javascript">
$('document').ready(function () {
$('#tblStudent').dataTable({
"serverSide": true,
"ajax": "Student/AjaxHandler",
"processing": true,
"columns": [
{ "sName": "StudentID" },
{ "sName": "StudentName" },
{ "sName": "StudentEmail" },
{ "sName": "StudentAge" }
]
});
});
</script>
</body>
</html>
Model
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace JQueryDataTable.Models
{
public class StudentModel
{
private string _StudentID;
private string _StudentName;
private string _StudentEmail;
private string _StudentAge;
/// <summary>
/// Student id property.
/// </summary>
public string StudentID
{
get
{
return _StudentID;
}
set
{
_StudentID = value;
}
}
/// <summary>
/// Student name property.
/// </summary>
public string StudentName
{
get
{
return _StudentName;
}
set
{
_StudentName = value;
}
}
/// <summary>
/// Student email property.
/// </summary>
public string StudentEmail
{
get
{
return _StudentEmail;
}
set
{
_StudentEmail = value;
}
}
/// <summary>
/// Student age property.
/// </summary>
public string StudentAge
{
get
{
return _StudentAge;
}
set
{
_StudentAge = value;
}
}
}
}
With the above code this is the result that I'm getting in a plain text.
{"aaData":[["555 123 4567","George"],["555 765 4321","Kevin"],["555 555 4781","Sam"]]}
Please help me thank you
This discussion has been closed.
Replies
Can you link to the page you are working on please?
Problems i see immediately:
Allan
Hi Allan,
I edited the code, it returned the right number of entries per row. However, it didn't bind it to a datatable.
Yes I needed the server side processing due to increase of data stored in the database and why is that my C# not implementing server-side-processing?
Resolved, just re-arranged the script sources.