Trying to Add ColReorder - dataTables.colReorder.js:856 Uncaught TypeError: Cannot read property '_C

BJ Hanf

Getting this error
dataTables.colReorder.js:856 Uncaught TypeError: Cannot read property '_ColReorder_iOrigCol' of undefined

DataTables 1.10.11 (tried changing my version to DataTables 1.10.12, no change).
ColReorder 1.3.2

If i comment out " colReorder: true, " below the error goes away.

To my cshtml page I added

colReorder.dataTables.css by Html.CssStyles().AddStyle(Url.Content("~/js/ColReorder/colReorder.dataTables.css"));
jquery.dataTables.js // was just using jquery.dataTables.min.js before
dataTables.colReorder.js by @Html.AddScriptFile(Url.Content("~/js/ColReorder/dataTables.colReorder.js"))

in my cshtml page I have this:

  @model HelpDesk.Models.PatientListModel

  @{
      ViewBag.Title = "Patient Management";
      //Html.CssStyles().AddStyle(Url.Content("~/js/jquery.datetimepicker.css"));
      Html.CssStyles().AddStyle(Url.Content("~/js/jquery-ui-1.8.18.custom.css"));
      Html.CssStyles().AddStyle(Url.Content("~/js/jquery.dataTables.min.css"));
      Html.CssStyles().AddStyle(Url.Content("~/js/ColReorder/colReorder.dataTables.css"));
  }

  @Html.AddScriptFile(Url.Content("~/js/jquery.dataTables.min.js"))
  @Html.AddScriptFile(Url.Content("~/js/jquery.dataTables.js"))
  @Html.AddScriptFile(Url.Content("~/js/ColReorder/dataTables.colReorder.js"))
  @Html.AddScriptFile(Url.Content("~/js/jqModal.js"))
  @*/@Html.AddScriptFile(Url.Content("~/js/jquery.datetimepicker.js"))*@
  @Html.AddScriptFile(Url.Content("~/js/jquery.ui-contextmenu.min.js"))
  @Html.AddScriptFile(Url.Content("~/js/jquery.simplemodal.min.js"))
  @Html.AddScriptFile(Url.Content("~/js/jquery.cookie.js"))

  @Html.AddScriptFile(Url.Content("~/js/jquery-ui.js"))

  ....

  .... Various page elements

  <table id="tblPatients" style="padding: 0; border-collapse: separate;" class="horizseparated flatbox">
              <thead>
                  <tr>
                      <th></th>
                      <th>Patient Name</th>
                      <th>DOB</th>
                      <th>Age</th>
                      <th>MRN</th>
                      <th>Location</th>
                      <th>LOS</th>
                      <th>Admit Date</th>
                      <th>Discharge Date</th>
                      <th>Address</th>
                      <th>Home Phone</th>
                      <th>Work Phone</th>
                      <th>Cell Phone</th>
                      <th>Gender</th>
                      <th>Notes</th>

                      @foreach (var lt in TicketUtils.LocationTypes.Where(l => l.DisabledType == false).OrderBy(l => l.OrderByNumber))
                      {
                          <th data-serverindex="@lt.LocationTypeID" style="">
                              @lt.Name
                          </th>
                      }
                      <th class="all">Patient Status</th>
                      <th class="all">Change Status</th>
                      @*<th></th>*@
                  </tr>
              </thead>

              <tbody>
                  @{
                      int i = 0;
                      foreach (var item in Model.Patients)
                      {
                          i++;
                          <tr class="patientRow" id="Row@(item.PatientID)" style="cursor: pointer;">
                              <td></td>
                              <td onclick="RowClick(@item.PatientID)">
                                  <div style="min-width: 100px;">
                                      @Html.DisplayFor(m => item.FullName)
                                  </div>
                              </td>
                           .... other values for Patients ....

                           </tr>
                      }
                  }
              </tbody>
              <tfoot></tfoot>
          </table>

  ....

  function createDataTables() {
          $('#tblPatients').DataTable(
                  {
                      responsive: true,
                      autoWidth: false,
                     colReorder: true,
                      destroy: true,
                      stateSave: true,
                      scrollX: true,
                      searching: true,
                      pagingType: "simple_numbers",
                      lengthMenu: [[10, 20, 50, -1], [10, 20, 50, "All"]],
                      dom: '<iBf<t>lp>',
                      order: [1,'asc'],
                      columnDefs: [{
                          targets: -2, "orderDataType": "dom-checkbox"
                      },
                      {
                          searchable: false,
                          orderable: false,
                          targets: [0,-1]
                      }],
                      buttons: [
                          {
                              extend: 'colvis',
                              columns: ':not(:first-child):not(:last-child)'
                          },
                          {
                              extend: 'csv',
                              columns: ':not(:first-child):not(:last-child)',
                              exportOptions:{
                                  columns:':visible'
                              }
                          },
                          {
                              extend: 'print',
                              columns: ':not(:first-child):not(:last-child)',
                              exportOptions:{
                                  columns:':visible'
                              }
                          }
                      ]
                  });
          table = $('#tblPatients').DataTable();

          //set hidden columns
          var hiddens = $.cookie(cookiePrefix + "hiddenColumns");
          if(hiddens !== undefined){
              var hiddenCols = new Array()
              hiddenCols = hiddens.split(",");
              // convert to ints
              for (i in hiddenCols){
                  hiddenCols[i]=parseInt(hiddenCols[i],10);
                  table.column(hiddenCols[i]).visible(false);
              }
              table.columns.adjust().draw( false );
          }
      }

   $(document).ready(function () {
          createDataTables();

  .. various other start functions
   });

allan

Can you link to the page showing the issue so I can take a look and debug it please.

Allan

BJ Hanf

The live site is a secure site, I don't have it live just in development on my desktop. send me a message and we can figure something out. bhanf@vertsys.com

moktor

Registered to respond to this, before I realized the question is from July 2016. I had the same issue, and it was a result of having an incorrect order array:

order: [1,'asc']

should be order: [ [1,'asc'] ]

allan

Yes - DataTables currently needs a 2D ordering array. I made some changed to allow a 1D array on init, but it caused all sorts of issues with plug-ins and extensions. I'm going to revisit it in future, but for now, use a 2D array.

Allan

sqn19961016

moktor It's true that the format of the array is incorrect, so there's a problem in parsing.