ASP.NETMVC:Jquery数据表与JSON动态列绑定_Jquery_Json_Datatables

ASP.NETMVC:Jquery数据表与JSON动态列绑定

jquery json datatables

ASP.NETMVC:Jquery数据表与JSON动态列绑定,jquery,json,datatables,Jquery,Json,Datatables,我试图用json为动态列绑定jquery数据表。我在mvc操作级别为列和数据生成json。我可以用json绑定数据，数据显示了，但列名没有显示。我还使用json绑定列请参阅mvc操作代码从这里我生成了两组json。一个用于列，一个用于数据 var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); TestData t = new TestData();

我试图用json为动态列绑定jquery数据表。我在mvc操作级别为列和数据生成json。我可以用json绑定数据，数据显示了，但列名没有显示。我还使用json绑定列

请参阅mvc操作代码从这里我生成了两组json。一个用于列，一个用于数据

var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            TestData t = new TestData();
            List<columnsinfo> _col = new List<columnsinfo>();

            DataTable dt = new DataTable();
            dt.Columns.Add("ID", typeof(Int32));
            dt.Columns.Add("Name", typeof(string));

            DataRow dr = dt.NewRow();
            dr[0] = 1;
            dr[1] = "Ajay";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = 2;
            dr[1] = "Sanu";
            dt.Rows.Add(dr);

            for (int i = 0; i <= dt.Columns.Count - 1;i++ )
            {
                _col.Add(new columnsinfo { data = dt.Columns[i].ColumnName });
            }

            string col =  (string)serializer.Serialize(_col);
            t.columns = col;


            var lst = dt.AsEnumerable()
            .Select(r => r.Table.Columns.Cast<DataColumn>()
                    .Select(c => new KeyValuePair<string, object>(c.ColumnName, r[c.Ordinal])
                   ).ToDictionary(z => z.Key, z => z.Value)
            ).ToList();

            string data= serializer.Serialize(lst);
            t.data = data;

            return View(t);

var serializer=new System.Web.Script.Serialization.JavaScriptSerializer（）；
TestData t=新的TestData（）；
列表_col=新列表（）；
DataTable dt=新的DataTable（）；
添加（“ID”，类型（Int32））；
添加（“名称”，类型（字符串））；
DataRow dr=dt.NewRow（）；
dr[0]=1；
dr[1]=“Ajay”；
dt.Rows.Add（dr）；
dr=dt.NewRow（）；
dr[0]=2；
dr[1]=“Sanu”；
dt.Rows.Add（dr）；
for（int i=0；i r.Table.Columns.Cast（）
.Select（c=>newkeyvaluepair（c.ColumnName，r[c.Ordinal]）
).ToDictionary（z=>z.Key，z=>z.Value）
).ToList（）；
string data=serializer.Serialize（lst）；
t、 数据=数据；
返回视图（t）；

我的视图代码

@model jqdata.Controllers.TestData
@{
布局=”；
ViewBag.Title=“主页”；
}
@HiddenFor（m=>m.columns，新的{@id=“dataObjCol”，占位符=Html.DisplayNameFor（m=>m.columns），@class=“form control”}）
@Html.HiddenFor（m=>m.data，新的{@id=“dataObjData”，占位符=Html.DisplayNameFor（m=>m.data），@class=“form control”}）


$（文档）.ready（函数（）{
//调试器；
警报（$（'#dataObjCol'）.val（））；
var dataObjCol=JSON.parse（$（'#dataObjCol'）.val（））；
var dataObjData=JSON.parse（$（'#dataObjData'）.val（）；
//数据表设置。
$（'#TableId'）。数据表(
{
“数据”：dataObjData，
“列”：dataObjCol，
“bPaginate”：错误，
“bFilter”：错误，
“bInfo”：假，
“自动宽度”：false，
“bSort”：错误，
“columnDefs”：[
{
“宽度”：“28px”，
“目标”：“0”，
“类名”：“文本权限”
},
{
“宽度”：“2px”，
“目标”：“1”，
“类名”：“文本权限”
}
]
});
});

这是我的两套json。 Json用于列

[{“data”：“ID”}，{“data”：“Name”}]

Json用于列

[{“ID”：1，“Name”：“Ajay”}，{“ID”：2，“Name”：“Sanu”}]

我无法理解我在哪里犯的错误。数据显示在jquery数据表中，但列名不显示。如果可能的话，把我推到正确的方向。谢谢

对不起，我只能解决它。当我在列中添加标题和数据时，问题就消失了

查看我的工作代码

对不起，我只能解决它。当我在列中添加标题和数据时，问题就消失了

查看我的工作代码

@model JQDataTable.Controllers.TestData

@{
    Layout = "";
    ViewBag.Title = "Home Page";
}


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>

<div style="display:none;" class="row">
    <div class="form-group">
        @Html.HiddenFor(m => m.columns, new { @id = "dataObjCol", placeholder = Html.DisplayNameFor(m => m.columns), @class = "form-control" })
        @Html.HiddenFor(m => m.data, new { @id = "dataObjData", placeholder = Html.DisplayNameFor(m => m.data), @class = "form-control" })
    </div>
</div>
<hr />

<div class="row">
    <div>
        <table class="table table-striped table-bordered table-hover"
               id="TableId"
               cellspacing="0"
               align="center"
               width="30%" border="1"></table>
    </div>
</div>
<hr />

<script type="text/javascript">
    $(document).ready(function () {
        //debugger;
        alert($('#dataObjCol').val());
        var dataObjCol = JSON.parse($('#dataObjCol').val());
        var dataObjData = JSON.parse($('#dataObjData').val());

        // Datatable settings.
        $('#TableId').DataTable(
        {
            "data": dataObjData,
            "columns": dataObjCol,
            "bPaginate": false,
            "bFilter": false,
            "bInfo": false,
            "autoWidth": false,
            "bSort": false,
            "columnDefs": [
                    {
                        "width": "28px",
                        "targets": "0",
                        "className": "text-right"
                    },
                    {
                        "width": "2px",
                        "targets": "1",
                        "className": "text-right"
                    }
            ]
        });
    });
</script>

var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            TestData t = new TestData();
            List<columnsinfo> _col = new List<columnsinfo>();

            DataTable dt = new DataTable();
            dt.Columns.Add("ID", typeof(Int32));
            dt.Columns.Add("Name", typeof(string));

            DataRow dr = dt.NewRow();
            dr[0] = 1;
            dr[1] = "Ajay";
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = 2;
            dr[1] = "Sanu";
            dt.Rows.Add(dr);

            for (int i = 0; i <= dt.Columns.Count - 1;i++ )
            {
                _col.Add(new columnsinfo { title = dt.Columns[i].ColumnName, data = dt.Columns[i].ColumnName });
            }

            string col =  (string)serializer.Serialize(_col);
            t.columns = col;


            var lst = dt.AsEnumerable()
            .Select(r => r.Table.Columns.Cast<DataColumn>()
                    .Select(c => new KeyValuePair<string, object>(c.ColumnName, r[c.Ordinal])
                   ).ToDictionary(z => z.Key, z => z.Value)
            ).ToList();

            string data= serializer.Serialize(lst);
            t.data = data;

            return View(t);

@model JQDataTable.Controllers.TestData

@{
    Layout = "";
    ViewBag.Title = "Home Page";
}


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>

<div style="display:none;" class="row">
    <div class="form-group">
        @Html.HiddenFor(m => m.columns, new { @id = "dataObjCol", placeholder = Html.DisplayNameFor(m => m.columns), @class = "form-control" })
        @Html.HiddenFor(m => m.data, new { @id = "dataObjData", placeholder = Html.DisplayNameFor(m => m.data), @class = "form-control" })
    </div>
</div>
<hr />

<div class="row">
    <div>
        <table class="table table-striped table-bordered table-hover"
               id="TableId"
               cellspacing="0"
               align="center"
               width="30%" border="1"></table>
    </div>
</div>
<hr />

<script type="text/javascript">
    $(document).ready(function () {
        //debugger;
        alert($('#dataObjCol').val());
        var dataObjCol = JSON.parse($('#dataObjCol').val());
        var dataObjData = JSON.parse($('#dataObjData').val());

        // Datatable settings.
        $('#TableId').DataTable(
        {
            "data": dataObjData,
            "columns": dataObjCol,
            "bPaginate": false,
            "bFilter": false,
            "bInfo": false,
            "autoWidth": false,
            "bSort": false,
            "columnDefs": [
                    {
                        "width": "28px",
                        "targets": "0",
                        "className": "text-right"
                    },
                    {
                        "width": "2px",
                        "targets": "1",
                        "className": "text-right"
                    }
            ]
        });
    });
</script>

public class TestData
    {
        public string jsondata { get; set; }
        public string columns { get; set; }
        public string data { get; set; }
    }

     public class columnsinfo
     {
         public string title { get; set; }
         public string data { get; set; }
     }