How to bind data base data to datatable in MVC using jquery

Question

1.00/5 (1 vote)

See more:

how to bind data base data to datatable in mvc using Jquery

i am trying bellow code but i will get

C#

No data available in table

in datatable

i am using

C#

return Json(new { data = objEmp }, JsonRequestBehavior.AllowGet);

in controler getting details but it will comes Json output

but i need datatable output
please Help me Friends

Advance thanks.........

What I have tried:

controler..

C#

public ActionResult Pandu()
        {

            //List<Employee> objEmp = new List<Employee>();
            Employee objEmp = new Employee();
            DataBaseData objDB = new DataBaseData();
            objEmp.ShowallCustomer = objDB.Selectalldata();
            //return View(new { data = objEmp });
            //return Json(new { data = objEmp }, JsonRequestBehavior.AllowGet);
            return View(Json(objEmp));


        }

Model...

C#

public List<Employee> Selectalldata()
        {
            //string result = "";
            List<Employee> Emplist = null;
            MySqlCommand cmd = new MySqlCommand("Select * from student", Con);
            
            MySqlDataAdapter da = new MySqlDataAdapter(cmd);
            DataSet Ds = new DataSet();
            da.Fill(Ds);
            Emplist = new List<Employee>();
            for (int i = 0; i < Ds.Tables[0].Rows.Count; i++)
            {
                Employee cobj = new Employee();
                cobj.Id = Convert.ToInt32(Ds.Tables[0].Rows[i]["Id"].ToString());
                cobj.Name = Ds.Tables[0].Rows[i]["Name"].ToString();
                cobj.EmailId = Ds.Tables[0].Rows[i]["EmailId"].ToString();
                cobj.MobileNo = Ds.Tables[0].Rows[i]["MobileNo"].ToString();
                cobj.City = Ds.Tables[0].Rows[i]["City"].ToString();
                cobj.image = Ds.Tables[0].Rows[i]["Image"].ToString();
                Emplist.Add(cobj);
            }
            return Emplist;
        }

View....

HTML

<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script>
                $(document).ready(function () {
                    $('#myTable').DataTable();
                });
</script>
<div style="width:90%; margin:0 auto;">
    <table id="myTable">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>EmailId</th>
                <th>MobileNo</th>
                <th>City</th>
                <th>image</th>
            </tr>
        </thead> 
        <tbody></tbody>      
    </table>
</div>
<style>
    tr.even {
        background-color: #F5F5F5 !important;
    }
</style>
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
@section Scripts{
    <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#myTable').DataTable({
                "bJQueryUI": true,
                "bServerSide": true,
                "ajax": {
                    "url": "/Employees/Pandu",
                    "type": "GET",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    "data": data

                },
                           
            });
        });
    </script>
}

Posted 17-Aug-16 2:08am

Member 11652153

Updated 17-Aug-16 4:24am

v4

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

njammy · Answer 1 · 2016-08-17T04:24:00

See my solution working here:
JSON to HTML table (jQuery) - JSFiddle[^]

Markup:

HTML

<table id="myTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>EmailId</th>
      <th>MobileNo</th>
      <th>City</th>
      <th>image</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JavaScript:
Note this line is important to find the correct place in the table markup to append the html row (should work for nested tables)

JavaScript

$("#myTable > tbody:last-child")

JavaScript

var data =
	   	[{
        	"Id":1,
            "Name":"Joe",
            "EmailId":"joe@email.com",
            "MobileNo":"447890111111",
            "City":"London"
        },
       	{
        	"Id":2, "Name":"Tony",
        	"EmailId":"tony@email.com",
        	"MobileNo":"447890111112",
        	"City":"London"
        }];
 
 var rowTemplate = 
 	"<table><tbody><tr>"+
    	"<td>[Id]</td>"+
        "<td>[Name]</td>"+
        "<td>[EmailId]</td>"+
        "<td>[MobileNo]</td>"+
        "<td>[City]</td>"+
        "<td>[Image]</td>"+
    "</tr></tbody></table>";
 
 $(document)
 .ready
 (
 	function() {
    	$.each(data, function(index,value) {
        	$("#myTable > tbody:last-child").append(GetDataBoundHtml(value));
            });
    }
 )
 
function GetDataBoundHtml(employee){
    var regMap = {
    	Id:employee.Id,
        Name:employee.Name,
        EmailId:employee.EmailId,
        MobileNo:employee.MobileNo,
        City:employee.City
    };
    // Note the following regular expression matches all fields required.
    // These are placeholder names with square brackets in the template Row.
    var reg = /\[Id\]|\[Name\]|\[EmailId\]|\[MobileNo\]|\[City\]/g; // the "/g" gets all matches instead of just the first one.
    var htmlRow = rowTemplate;
    return htmlRow.replace(reg,function(matched){
        // For every match in the group
    	var formattedMatch = matched.replace(/\[|\]/g,""); // Strip the squares as the regMap does not have squares and this way can return the mapped value of employee.
        console.log(formattedMatch);
        return regMap[formattedMatch];
    });
 };

Output:

Id Name EmailId MobileNo City image
1 Joe joe@email.com 447890111111 London [Image]
2 Tony tony@email.com 447890111112 London [Image]