Установить результаты запроса в качестве источника для DataTable

Question

Я пытаюсь установить источник данных для данных, возвращаемых из моей хранимой процедуры. Это мой код, но мой DataTable не заполнен. Может кто-нибудь помочь мне с обновлением этого кода, чтобы DataTable заполнялся результатами хранимых процедур?

Это мой JavaScript

$("#btnClick").click(function () {
$('#example').DataTable({
    ajax: {
        url: getURL,
        method: "GET"
    },
    columns: [
        { data: "Location" },
        { data: "TC" }
    ]
});
});

Этомой HTML

<div id="table1">
    <table id="example" class="display">
    </table>
</div>
<br />
<div class="text-center">
    <div class="btn-group">
        <button type="button" id="btnClick">Button One</button>
    </div>
</div>
@section Scripts {
    <script>
        var getURL = '@Url.Action("GTC")';
    </script>
}

Это мой код контроллера:

[ApiController]
[Route("api/EmpCheck")]
public class EmpCheckController : Controller
{
    EmpCheck _context;

    public EmpCheckController( context)
    {
        _context = context;
    }

    public IActionResult Index()
    {
        var VerifyAllEmpsOnDuty = _context.EmpCheckModel.FromSql("_GetClockedInEmps").ToList();
        return View(VerifyAllEmpsOnDuty);
    }
}

Answer 1

Вы можете напрямую связать источник AJAX с данными. если ваш API работает нормально.

you can do it by two way.

1- directly bind ajax source.

2- fetch record using ajax and then bind response to DataTable.

Вот рабочий пример для обоих

Answer 2

Пожалуйста, отметьте это для более подробной информации Нажмите здесь

cshtml page

<div id="table1">
    <table id="example" class="display">
    </table>
</div>
<br />
<div class="text-center">
    <div class="btn-group">
        <button type="button" id="btnClick">Button One</button>
    </div>
</div>

Код контроллера

[ApiController]
[Route("api/EmpCheck")]
public class EmpCheckController : Controller
{
    EmpCheck _context;

    public EmpCheckController( context)
    {
        _context = context;
    }

    public IActionResult Index()
    {        
        return View();
    }
    public IActionResult LoadDataTable()
    {
        var VerifyAllEmpsOnDuty = _context.EmpCheckModel.FromSql("_GetClockedInEmps").ToList();

        return Json(new  
        {                      
            recordsTotal = VerifyAllEmpsOnDuty.Count(),                      
            data = VerifyAllEmpsOnDuty  
        }, JsonRequestBehavior.AllowGet);  
    }
}

Javascript код

@section Scripts {
    <script>
    $( document ).ready(function() {
    console.log( "ready!" );
    var getURL = '@Url.Action("LoadDataTable","EmpCheck")';
        This is my JavaScript
        $("#btnClick").click(function () {
            $('#example').DataTable({
                ajax: {
                    url: getURL,
                    method: "GET"
                },
                columns: [
                    { data: "Location" },
                    { data: "TC" }
                ]
            });
        });
});
    </script>
}