如何使用jquery将数据库数据绑定到MVC中的数据表 [英] How to bind data base data to datatable in MVC using jquery

查看:74
本文介绍了如何使用jquery将数据库数据绑定到MVC中的数据表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何使用Jquery将数据库数据绑定到mvc中的数据表



i我正在尝试下面的代码,但我会得到

没有数据可用 



in datatable



i am使用

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



在控制器中获取详细信息但它会出现Json输出



但是我需要数据输出

请帮帮我朋友



预付款.........



我尝试过:



controler ..





  public  ActionResult Pandu()
{

// 列表<员工> objEmp = new List< Employee>();
Employee objEmp = new Employee();
DataBaseData objDB = new DataBaseData();
objEmp.ShowallCustomer = objDB.Selectalldata();
// return View(new {data = objEmp});
< span class =code-comment> // 返回Json(new {data = objEmp},JsonRequestBehavior.AllowGet);
return 查看(Json(objEmp));


}





型号......



  public 列表<员工> Selectalldata()
{
// string result =;
列表<员工> Emplist = null ;
MySqlCommand cmd = new MySqlCommand( 选择*来自学生,Con);

MySqlDataAdapter da = new MySqlDataAdapter(cmd);
DataSet Ds = new DataSet();
da.Fill(Ds);
Emplist = new 列表< Employee>();
for int i = 0 ; i < Ds.Tables [ 0 ]。Rows.Count; i ++)
{
员工cobj = 员工();
cobj.Id = Convert.ToInt32(Ds.Tables [ 0 ]。行[i] [ Id]。ToString());
cobj.Name = Ds.Tables [ 0 ]。行[i] [ < span class =code-string> Name]。ToString();
cobj.EmailId = Ds.Tables [ 0 ]。行[i] [ < span class =code-string> EmailId]。ToString();
cobj.MobileNo = Ds.Tables [ 0 ]。行[i] [ < span class =code-string> MobileNo]。ToString();
cobj.City = Ds.Tables [ 0 ]。行[i] [ < span class =code-string> City]。ToString();
cobj.image = Ds.Tables [ 0 ]。行[i] [ < span class =code-string> 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 >
< 链接 rel = stylesheet type = text / css href = http://cdn.datatables.net/1.10.9/css /jquery.dataTables.min.css\">
< < span class =code-leadattribute> script >
$( document )。ready( function (){
$(' #myTable的')数据表();
});
< / script >
< div style = width:90%; margin:0 auto; >
< id = myTable >
< thead >
< tr >
< th > Id < / th >
< th > 名称< / th >
< th > EmailId < / th >
< th > MobileNo < / th >
< th > 城市< / th >
< th > image < / th >
< / tr >
< / thead >
< tbody &g t; < / tbody >
< / table >
< / div >
< style >
tr 甚至 {
< span class =code-attribute> background-color
#F5F5F5 !important ;
}
< / style >
< link href = // cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css\" rel = 样式表 / >
@section脚本{
< script src = / /cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js\"> < / script >
< script < span class =code-keyword>>
$( 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

},

});
});
< / < span class =code-leadattribute> script >
}

解决方案

document )。ready( function (){

' #myTable')。DataTable();
});
< / script >
< div style = width:90%;保证金:0自动; >
< id = myTable >
< thead >
< tr >
< th > Id < / th >
< th > 名称< / th >
< th > EmailId < / th >
< th > MobileNo < / th >
< th > 城市< / th >
< th > image < / th >
< / tr >
< / thead >
< tbody > < < span class =code-leadattribute> / tbody >
< / table >
< / div >
< style >
tr 甚至 {
background-color #F5F5F5 !important ;
}
< / style >
< link href = //cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css\" rel = stylesheet / >
@section脚本{
< script src = // cdn.datatables .net / 1.10.9 / js / jquery.dataTables.min.js > < / script >
< script >


document )。ready( function (){

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

i am trying bellow code but i will get

No data available in table


in datatable

i am using

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


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

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

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

解决方案

(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 () {


这篇关于如何使用jquery将数据库数据绑定到MVC中的数据表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆