Problem

plw

 $(document).ready(function () { 
               var groupColumn = 4;
               $("#DTable").dataTable({ 
                   "pageLength": 30,
                   autoWidth: false,
                   columnDefs: [
                        { type: 'natural-nohtml', targets: '0' },
                        { visible: false, targets: groupColumn }
                    ],
                  
                   "lengthMenu": [ 10, 25, 30, 50, 75, 100 ],
                   "bFilter": false,
                   "aaSorting": [[ 0, 'asc' ]],
                   "aoColumns": [ 
                       { "bSortable": true },                       
                       { "bSortable": true },                     
                       { "bSortable": true },
                       { "bSortable": true },
                       { "bSortable": false }
                   ],
                   drawCallback: function (settings) {
                    var api = this.api();
                    var rows = api.rows({ page: 'current' }).nodes();
                    var last = null;
                    var TheRowCount = 1;
                    api
                        .column(groupColumn, { page: 'current' })
                        .data()
                        .each(function (group, i) {
                            if (last !== group) {
                                if (TheRowCount == 1) {
                                    $(rows)
                                        .eq(i)
                                        .before('<tr class="group"><td colspan="6" bgcolor="#ffffcc">' + group + '</td></tr>');
                                }
                                else {
                                    $(rows)
                                        .eq(i)
                                        .before('<tr class="group"><td colspan="6" bgcolor="#ffffcc"><hr style="padding: 0px; margin: 0px; background-color: black; border: 0px; height: 1px;">' + group + '</td></tr>');
                                }
                                last = group;
                            }
                            TheRowCount++;
                        });
                },
               });
           });  

The third row down is coming out with a thick or double

 <hr> 

and I have no idea why

If I just have

                             if (last !== group) {
                                          $(rows)
                        .eq(i)
                        .before('<tr class="group"><td colspan="6" bgcolor="#ffffcc"><hr style="padding: 0px; margin: 0px; background-color: black; border: 0px; height: 1px;">' + group + '</td></tr>');
                }               
                last = group;

then the thick or double <hr> or double <hr> is before the change in group name which is the 4th row

How can I stop that vand have just the thin one like the other rows?

Thanks

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

plw

I have had to change

<hr style="padding: 0px; margin: 0px; background-color: black; border: 0px; height: 1px;"

to

<hr style="padding: 0px; margin: 0px; background-color: black; border: 0px; height: 2px;"

to get all the rows looking the same. Something in Data Tables is affecting the height of the <hr>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.