Member 11652153 Ответов: 1

Как связать базу данных в DataTable в MVC с помощью jQuery

как связать базу данных в DataTable в MVC с помощью jQuery

я пытаюсь использовать код ниже, но я получу 
No data available in table

в datatable

Я использую 
return Json(new { data = objEmp }, JsonRequestBehavior.AllowGet);

в controler получаются детали, но он будет выводить JSON

но мне нужен вывод данных
пожалуйста помогите мне друзья

Заранее благодарю.........

Что я уже пробовал:

контролер..


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));


        }


Модель...

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;
        }



Смотреть....

<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>
}

1 Ответов

Рейтинг:
0

njammy

Смотрите мое решение работающее здесь:
JSON to HTML table (jQuery) - JSFiddle[^]

Разметка:

<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:
Примечание эта строка важна для того, чтобы найти правильное место в разметке таблицы для добавления html-строки (должна работать для вложенных таблиц)
$("#myTable > tbody:last-child")


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];
    });
 };


Выход:

Id имя EmailId MobileNo город изображение
1 Джо joe@email.com 447890111111 Лондон [изображение]
2 Тони tony@email.com 447890111112 Лондон [изображение]

Member 11652153

Но мне нужен формат DataTable в MVC с разбиением на страницы, функцией поиска и т. д. Попробуйте этот тип, пожалуйста..

njammy

Я дал вам ответ в соответствии с вопросом, а не с этим последним комментарием.
Что вы имеете в виду под DataTable в формате MVC?

Member 11652153

хорошо мне нужно только datatable в формате mvc из базы данных

njammy

Что вы имеете в виду под DataTable в формате MVC, пожалуйста, дайте больше объяснений вместо того, чтобы ходить по кругу.