locked
Datatable warning : cannot reinitialise datatable RRS feed

  • 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

  • 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
  • User-1696960412 posted
    It seems like this indicates that you might have somewhere else in your code that is trying to initialize the same data type, but it's hard to say without your entire code file.
    Tuesday, August 27, 2019 9:48 AM