Sunday, September 7, 2014

DataTables TypeError: sGroup.toLowerCase is not a function

I have two (2) different tables which I dynamically populate with data once user clicked a button submitting an ajax request to server.

The 1st table consist of 4 columns having the below table structure:

  1. Column 1: Container ID (VARCHAR)
  2. Column 2: Pallet ID (VARCHAR)
  3. Column 3: Quantity (INT)
  4. Column 4: Action (VARCHAR)
The 2nd table consist of 5 columns having the below table structure:

  1. Column 1: Box Number (INT)
  2. Column 2: Container ID (VARCHAR)
  3. Column 3: Pallet ID (VARCHAR)
  4. Column 4: Quantity (INT)
  5. Column 5: Action (VARCHAR)

The only difference is that the 2nd table should be able to show Box Number on the first column.

I tried to apply row grouping on the 1st table for better data representation after populating the table using the following code:

$.each(result.data,function(i,e){
     MyTable.fnAddData([e.ContainerID,e.PalletID,e.Quantity,'Action'],0,0);
}

The 1st table is perfectly working. So the next thing that I did is to replicate the code for the 2nd table and just added the first column (Box Number).

$.each(result.data,function(i,e){
     MyTable.fnAddData([e.Boxnumber,e.ContainerID,e.PalletID,e.Quantity,'Action'],0,0);
}


With several attempts it shows an error saying:
  • TypeError: sGroup.toLowerCase is not a function
I tried to debug my code and read all the lines if I have missed anything but still having issues. So the next thing that I did is to search for the toLowerCase function on the plugin and I found the below code:

function _fnGetCleanedGroup(sGroup) {
     if (sGroup === "") return "-";
     return sGroup.toLowerCase().replace(/[^a-zA-Z0-9\u0080-\uFFFF]+/g, "-"); //fix for unicode characters (Issue 23)
     //return sGroup.toLowerCase().replace(/\W+/g, "-"); //Fix provided by bmathews (Issue 7)
}

BTW, I'm using the row grouping version 1.2.9 by Jovan Popovic. Can be downloaded here.

I modify the function and it worked! However, there comes another issue in grouping as it doesn't group the record correctly. So I reverted the code and tried another solution.

Looking on the sample data, I have noticed that the row grouping works well with string and I only encounter issues whenever the first column contains an integer (number). So I've come up with the solution as shown below:

$.each(result.data,function(i,e){
     MyTable.fnAddData([e.Boxnumber.toString(),e.ContainerID,e.PalletID,e.Quantity,'Action'],0,0);
}

I've added toString() function on the Box Number field so that the row grouping plugin would identify the data as string.

I think this would be one of the quick fix solution that I can share with you guys. Please do share your thoughts and suggestions as well so that I can improve my mine too :)