Remove From My Forums

Datatable warning : cannot reinitialise datatable

Question

User490317677 posted

Hi :)

I have an DropDown and based on what user select/choose it should be pass value to Controller and than display/retrieve data in DataTable,

And when i choose item for first time from dropdown it will be work fine ,

but, when i try second time to choose item i will get error: Cannot reinitialise datatable.

I tried also add destroy: true but its not going to work.

HTML:

 @Html.DropDownListFor(x => Model.CompanyNo, Model.Companies, "Select")
  
<table d="usertable" style="display:none;"  id="OrdrerList" style="width:100%">
    <thead>
  <tr>
         <th class="fts">E-mail</th>
         <th class="fts">Firmanavn</th>
         <th class="fts">Oprettelsesdato</th>
         <th class="fts">Kundenummer</th>
         <th class="fts">Rolle</th>
         <th></th>
 </tr>
</thead>

 <tbody class="fts"></tbody>

 </table>

DataTable:

<script>

$(function () {

 $("#CompanyNo").on('change', function () {

    $("#usertable").show();

    var DLLCompanies = $("#CompanyNo option:selected").text();
     
    $('#OrdrerList').DataTable({
        "processing": true,
        "serverSide": true,
        "colReorder": true,
        "responsive": true,
        "pageLength": 15,

        ajax: {

            url: '@Url.Action("GetAll", "User")',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: {
                DLLCompanies:DLLCompanies
            },
        },
        columns: [
            {
                //Data stuff here
                data: "Somedata",
                
        ],
        "order": [0, "Asc"]

        });
   })

  });
</script>

Thursday, August 22, 2019 10:03 AM

Answers

User665608656 posted

Hi ManDown,

According to your description, this error indicates that DataTables does not allow initialisation options to be altered at any time other than at initialisation time.

So, if you want to change datatable based on your dropdownlist selected value, you can use destroy in your jquery.

You can refer to this link: https://datatables.net/manual/tech-notes/3

I have made an example, you can refer to the following code:

@model  MVC_Cases.Models.Employee
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
    <script type="text/javascript" src="  https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <script>

$(function () {

 $("#EmplId").on('change', function () {
    var table =  $('#OrdrerList').DataTable();
    table.destroy();
    $("#OrdrerList").show(); 
    var DLLCompanies = $("#EmplId option:selected").text(); 
   table =  $('#OrdrerList').DataTable({
        "processing": true,
        "colReorder": true,
        "responsive": true,
        "pageLength": 15,
        "ajax": {
               "url": '@Url.Action("GetAll", "User")',
               "tye": "GET",
               "datatype": "json",
                  "data": {
                DLLCompanies:DLLCompanies
            },
           },
           "columns": [
          { "data": "EmplId" },
          { "data": "FirstName" },
          { "data": "LastName" },  
          { "data": "EmailAddr" }
 
           ],
        "order": [0, "Asc"]
        });
      
   })

  });
    </script>
</head>
<body>
    <div style="width:500px">
        @Html.DropDownListFor(model => model.EmplId, new SelectList(ViewBag.Employees, "EmplId", "FirstName"), "Select")
        <table  style="display:none;" id="OrdrerList" style="width:70%">
            <thead>
                <tr>
                    <th class="fts">EmplId</th>
                    <th class="fts">FirstName</th>
                    <th class="fts">LastName</th>
                    <th class="fts">EmailAddr</th>
                </tr>
            </thead>

        </table>
    </div>
</body>
</html>

        [HttpGet]
        public JsonResult GetAll(string DLLCompanies)
        {
            EntityData entities = new EntityData();
            List<Employee> dataList = (from c in entities.Employees where c.FirstName.Contains(DLLCompanies) select c).ToList();
            return Json(new { data = dataList }, JsonRequestBehavior.AllowGet);
        }

Here is the result of this work demo:

Best Regards,

YongQing.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, August 23, 2019 5:10 AM

All replies