Bootstrap Datatables not rendering Data from Server-side request

Joel Luevano 0
Viewed 34

Im working with Datatables in a MVC project but the browser is throwing Uncaught TypeError: c is undefined. I alredy tried with several solutions taken from other forums but I´m still having the same problem.

My HTML:

<table class="table table-hover  table-sm table-responsive" id="table-result">
    <thead class="thead-inverse">
    <tr>
        <th>MAQUINA</th>
        <th>MODELO</th>
        <th>MOLDE</th>
        <th>SHOT</th>
        <th>FECHA</th>
        <th>CYCLE_TIME</th>
        <th>METAL_TEMPERATURE</th>
        <th>DIE_TEMPERATURE</th>
        <th>DIE_TEMPERATURE_SUP</th>
        <th>WATER_IN</th>
        <th>WATER_OUT</th>
        <th>PRESSURE_PATTERN</th>
    </tr>
 </thead>
 <tbody>
                    
 </tbody>
</table>

I'm using next script to call the controller

$('#table-result').DataTable({
      serverSide: true,
      processing: true,
      deferRender: true,
      "bPaginate": true,
      "bLengthChange": false,
      "bFilter": false,
      "bInfo": true,
      "bAutoWidth": true,
      "ordering": true,
      "bSortClasses": false,
      "bDestroy": true,
      bLengthChange: false,
      "iDisplayLength": 50,
      responsive: true,
      dom: 'Bfrtip',
      ajax: function (data, callback, s) {
          
           ajax =
              $.ajax({
              url: '@Url.Action("DataTable_Moldeo")',
              "dataSrc": "Data", //<--- place dataSrc here instead
                  type: "GET",
                  contentType: "application/json",
                  dataType: 'json',
                  data: {
                      MaquinasList: $("#MaquinasList").val(),
                      ModeloList: $("#ModeloList").val(),
                      fecha_ini: $("#fecha_ini_val").val(),
                      fecha_fin: $("#fecha_fin_val").val(),
              },
              success: function (data) {
                  data = JSON.stringify(data);
                  alert(data);
                  callback(data);
              },
                  error: function (e) {
                      // can add sweetalert or normal alert
                  }
              });
      },
      
  });

And the returned Json looks like this:

[
{
"MAQUINA":"AQM-901",
"MODELO":"KH5T",
"MOLDE":55,
"SHOT":11,
"FECHA":"30/08/2022",
"CYCLE_TIME":2741,
"METAL_TEMPERATURE":710,
"DIE_TEMPERATURE":999,
"DIE_TEMPERATURE_SUP":999,
"WATER_IN":230,
"WATER_OUT":460,
"PRESSURE_PATTERN":0
},
{
"MAQUINA":"AQM-901",
"MODELO":"KH5T",
"MOLDE":55,
"SHOT":11,
"FECHA":"30/08/2022",
"CYCLE_TIME":2741,
"METAL_TEMPERATURE":710,
"DIE_TEMPERATURE":999,
"DIE_TEMPERATURE_SUP":999,
"WATER_IN":230,
"WATER_OUT":460,
"PRESSURE_PATTERN":0
},
{
"MAQUINA":"AQM-901",
"MODELO":"KH5T",
"MOLDE":55,
"SHOT":11,
"FECHA":"30/08/2022",
"CYCLE_TIME":2741,
"METAL_TEMPERATURE":710,
"DIE_TEMPERATURE":999,
"DIE_TEMPERATURE_SUP":999,
"WATER_IN":230,
"WATER_OUT":460,
"PRESSURE_PATTERN":1
},
{
"MAQUINA":"AQM-901",
"MODELO":"KH5T",
"MOLDE":55,
"SHOT":11,
"FECHA":"30/08/2022",
"CYCLE_TIME":2741,
"METAL_TEMPERATURE":710,
"DIE_TEMPERATURE":999,
"DIE_TEMPERATURE_SUP":999,
"WATER_IN":230,
"WATER_OUT":460,
"PRESSURE_PATTERN":65535
},
{
"MAQUINA":"AQM-901",
"MODELO":"KH5T",
"MOLDE":55,
"SHOT":11,
"FECHA":"30/08/2022",
"CYCLE_TIME":2741,
"METAL_TEMPERATURE":710,
"DIE_TEMPERATURE":999,
"DIE_TEMPERATURE_SUP":999,
"WATER_IN":230,
"WATER_OUT":460,
"PRESSURE_PATTERN":1
},
{
"MAQUINA":"AQM-901",
"MODELO":"KH5T",
"MOLDE":55,
"SHOT":11,
"FECHA":"30/08/2022",
"CYCLE_TIME":2741,
"METAL_TEMPERATURE":710,
"DIE_TEMPERATURE":999,
"DIE_TEMPERATURE_SUP":999,
"WATER_IN":230,
"WATER_OUT":460,
"PRESSURE_PATTERN":65534
}
]

I've read in every forum that it is just because my html is malformed, but I have check it many times and I can't see the problem.

greatings!!

datatables bootstrap-4 asp.net-mvc jquery
1 Answers
<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

add this code to html

<table class="table table-bordered table-hover" id="tbl-bankCardTransactions">
<thead>
    <tr>
        <th style="text-align:right">Bank Name</th>
        <th style="text-align:right">Count Transactions</th>
        <th style="text-align:right">Sum Transactions</th>
    </tr>
</thead>
<tbody>
</tbody>
</table>

in js add this code

function getBankCardTransactions() {
    var table = $('#tbl-bankCardTransactions').DataTable();
    //clear datatable
    table.clear().draw();
    //destroy datatable
    table.destroy();


    let url = 'your url';

    $('#tbl-bankCardTransactions').DataTable({
        serverSide: true,
        ajax: {
            url: url,
            dataFilter: function (data) {
                //success call api
                return data;
            },
            error: function (xhr, error, thrown) {
                //error call api
            }
        },
        columns: [
            { data: 'BankName' },
            { data: 'TransactionCount' },
            { data: 'SumPrice' },
        ],
        searching: false,
        paging: true,
        info: false,
        columnDefs: [
            {
                targets: [0, 1, 2],
                sortable: false
            }
        ],
        lengthChange: false
    });
}

in MVC add a ViewModel and call BankCardTransactionBodyViewModel

public class BankCardTransactionBodyViewModel
{
    public int draw { get; set; }
    public int start { get; set; } = 0;
    public int length { get; set; } = 10;
}

and create another ViewModel call BankCardTransactionResultViewModel

public class BankCardTransactionResultViewModel
{
    public int draw { get; set; }
    public int recordsTotal { get { return recordsFiltered; } }
    public int recordsFiltered { get; set; }
    public List<BankCardTransaction> data { get; set; }
}

and use this code

public JsonResult GetBankCardTransactions(BankCardTransactionBodyViewModel model)
{
    var result = new BankCardTransactionResultViewModel();
    var transactions = db.BankCardTransactions.AsQuerable();
    result.recordsFiltered = transactionGrouped.Count();
    result.data = transactions.OrderByDescending(a => a.Id).Skip(model.start).Take(model.length).ToList();
    result.draw = model.draw;
    return Json(result, JsonRequestBehavior.AllowGet);
}
Diako Hasani0
Related