DataTable не отображается в результате (отображаются данные типа json) - PullRequest
Новая
       22

DataTable не отображается в результате (отображаются данные типа json)

0 голосов
/ 03 мая 2019

( модель класса ) модель класса Employee

public class Employee
{
    public int Employee_id { get; set; }
    public string Name { get; set; }
    public string Contact { get; set; }
    public int Salary { get; set; }
}

Контроллер ActionResult получает данные от EmployeeGet Класс 

public ActionResult Index()
{
    EmployeeGet empgetObj = new EmployeeGet();
    var getRecord = empgetObj.GetAllEmployees();
    return Json(new{ data = getRecord}, JsonRequestBehavior.AllowGet);      
}

Класс для получения записи из базы данных через запрос 

public class EmployeeGet 
{
    string connString = (@"Data Source=DESKTOP-PK5A6U3\SQLEXPRESS;Initial Catalog = TableImplemented; Integrated Security = True");
    public List<Employee> GetAllEmployees()
    {
        List<Employee> employees = new List<Employee>();
        using (SqlConnection conn = new SqlConnection(connString))
        {

            var query = "select * from Employee";
            using (SqlCommand cmd = new SqlCommand(query, conn))
            {
                conn.Open();
                SqlDataReader rdr = cmd.ExecuteReader();
                while (rdr.Read())
                {
                    Employee employee = new Employee();
                    employee.Employee_id = Convert.ToInt32(rdr["Employee_id"]);
                    employee.Name = rdr["Name"].ToString();
                    employee.Contact = rdr["Contact"].ToString();
                    employee.Salary = Convert.ToInt32(rdr["Salary"]);
                    employees.Add(employee);

                }
                conn.Close();
            }
        }
        return employees;
    }
}

Индексное представление В этом представлении я реализую таблицу 

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

<table id="tbleID" width="90%" class="display">
    <thead>
        <tr>
            <th>Employee_id</th>
            <th>Name</th>
            <th>Contact</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>

Это мой Ajax-вызов для реализации dataTable, но он показывает данные типа JSON не в форме DataTable.

Я использовал эти две библиотеки для реализации этой таблицы данных:

// cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" // cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
@section Scripts{
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

    <script>
    (function ($) {
        debugger;
        $("#tbleID").DataTable(    
                {
                    'ajax': {
                        'url': '/Home/Index',
                        'type': 'GET',
                        'contentType':"application/json; charset=utf-8",
                        'dataType': 'json',

                    },

                    'columns':
                    [
                        { 'data': 'Employee_id', 'autoWidth': true },
                        { 'data': 'Name', 'autoWidth': true },
                        { 'data': 'Contact', 'autoWidth': true },
                        { 'data': 'Salary', 'autoWidth': true }
                    ]
                });
        });    
    </script>    
}

1 Ответ

0 голосов
/ 03 мая 2019

Во-первых, вам нужно только вернуть данные json, как это 

     return Json(getRecord);

Во-вторых, вы можете изменить свой код js из этого 

(function ($) {

в этот 

(function() {

Обновите код js 

   $("#tbleID").DataTable(

            {
                'ajax': '/Home/Index',
                'columns':
                [
                    { 'data': 'Employee_id', 'autoWidth': true },
                    { 'data': 'Name', 'autoWidth': true },
                    { 'data': 'Contact', 'autoWidth': true },
                    { 'data': 'Salary', 'autoWidth': true }
                ]
            });

Пожалуйста, дайте мне знать, чтобы я мог отредактировать свой ответ

...