Why does tbody have one extra (blank) column on the left?

rdm

I have a simple scenario that is baffling me. For some strange reason, my tbody has one extra blank column to the left. I can't find any documentation explaining why this is happening.

If I add a blank <th></th> to the first column, the column placements match for the table, but then I'm left with a blank first column (no data and no header) that I don't want.

One of the first things I checked for was to make sure that my columns were all present and in the correct order. They are.

How do I resolve this issue

HTML

<table class="table" id="Example">
    <thead>
        <tr>
           <th></th>  @*The columns line up now, but I don't want this column.*@
            <th>Campus</th>
            <th>Cohort</th>
            <th>Student Name</th>
            <th>Student ID</th>
            <th>Entry Date</th>
            <th>Exit Date</th>
            <th>Exit Code</th>
            <th>ADE Identity Search Cross-check Date</th>
        </tr>
    </thead>
</table>

jQuery:

var editor;
        $(() => {

            editor = new $.fn.dataTable.Editor({
                ajax: "@Url.Action("EditorTable")",
                table: "#Example",
                fields: [
                    { label: "Campus", name: "Campus" },
                    { label: "Cohort", name: "Cohort" },
                    { label: "StudentName", name: "StudentName" },
                    { label: "StudentId", name: "StudentId" },
                    { label: "EntryDate", name: "EntryDate" },
                    { label: "ExitDate", name: "ExitDate" },
                    { label: "ExitCode", name: "ExitCode" },
                    { label: "AdeIdentitySearchCrossCheckDate", name: "AdeIdentitySearchCrossCheckDate" },
                ]
            });

            var dataTableConfig = {
                //dom: "Blfrti",
                ajax: {
                    url: "@Url.Action("EditorTable")",
                    data: {
                        campus : "@Model.Campus",
                        cohort : "@Model.Cohort"
                    },
                    type: "POST"
                },
                buttons: ['excelHtml5','print'],
                columns:
                [
                    { data: "Campus" },
                    { data: "Cohort" },
                    { data: "StudentName" },
                    { data: "StudentId" },
                    { data: "EntryDate" },
                    { data: "ExitDate" },
                    { data: "ExitCode" },
                    { data: "AdeIdentitySearchCrossCheckDate"}
                ]
            };

            $('#Example').DataTable(dataTableConfig);

            // Activate an inline edit on click of a table cell
            $('#Example').on('click','tbody td:last-child',
                function () {
                    editor.inline(this);
                });
        });

Controller:

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
        public ActionResult EditorTable(string campus, int cohort)
        {
            var settings = Properties.Settings.Default;
            var formData = HttpContext.Request.Form;

            using (var db = new Database(settings.DbType, settings.DbGradRate))
            {
                var response = new Editor(db, "ReconcileCohort", "Id")
                        .Field(new Field("Campus"))
                        .Field(new Field("Cohort"))
                        .Field(new Field("StudentName"))
                        .Field(new Field("StudentId"))
                        .Field(new Field("EntryDate"))
                        .Field(new Field("ExitDate"))
                        .Field(new Field("ExitCode"))
                        .Field(new Field("AdeIdentitySearchCrossCheckDate"))
                        .Where("Campus", campus)
                        .Where("Cohort", cohort)
                    .Process(formData).Data();
                return Json(response, JsonRequestBehavior.AllowGet);
            }
        }

colin

Yep, looks good to me too - I even mocked it up with local data and it aligns as expected. Have you checked the returned data, is there anything odd in there?

Cheers,

Colin

rdm

Using Chrome, I see under Network > XHR, I see that all my fields are correctly accounted for. There are no console errors. I do see that there is a field called DT_RowId with values like 'row_1', 'row_2', etc..

I figure that's a utility field that needs to there so that when I edit a record, the controller knows which record to update in the database.

I wonder if this accounts for the extra field. I took a look that the link you used to mock it, I can consider one critical difference. My example is .NET MVC where the data connects to a SQL database. I wonder if there is something in my environment that is injecting an extra column. Just thinking aloud, as I can't find any glaring PBCAK errors on my part. This is the only time I have encountered this problem, ever.

I might have to do a CSS style hack and make that column vanish. Still scratching my head.

allan

Are you able to give us a link to the page in its error state please? I don't see anything wrong with the above code either - the empty th looks like it would throw everything off!

If a link isn't possible, perhaps you could use the debugger to give us a trace?

Allan

rdm

While it's easy enough to use the debugger, my concern is that the data contained is confidential student data and cannot be shared outside the company. Is there a way to use the debugger without making any of the actual data visible?

colin

One trick would be to use the API call clear() from the console - that would clear the table. So, something like $('#example').DataTable().clear().draw(). It's the table declaration that would be useful, not the data it contains.

C

rdm

I used the Javascript snipped method and got this as a result.

I've looked around the results myself and I'm not sure what it is I'm supposed to be looking for. Hopefully someone else has better luck.

Thanks

allan

Hi,

Thanks for the trace. The information in the debugger does't appear to quite line up with the code shown above - for example this is the initialisation given to the DataTable:

{
    "dom": "Blftipr",
    "sScrollX": "100%",
    "paging": false,
    "autoWidth": false,
    "bScrollCollapse": true,
    "buttons": [{
        "extend": "excelHtml5"
    }, {
        "extend": "print"
    }],
}

There is no columns array as shown in your code above.

Also the column titles don't match the HTML shown above - the debugger shows them as:

Campus
Cohort
Student Name
Student ID
Entry Date
ROSE Credit
Not ROSE Credit
Total Credit
Total Days Attended

Are you able to give me a link to a page showing the issue please or create a test page showing it? If you don't want to make it public (completely understand) you can PM me by clicking my forum user name above and then the "Send message" button.

Thanks,
Allan

rdm

That's funny. I'm looking at the correct view and using the Network > XHR panel to open up the returned columns. I'm seeing exactly the columns I would expect to see.

I'm going to try giving the debugger another try and take it from there.

Correction. I was going to try that. For some strange reason, $('#Example').DataTable(dataTableConfig).clear().draw(); isn't clearing out the table rows like it did the last time. Even refreshing cache doesn't solve the problem.

More mysteries.

rdm

I tried using Firefox as a debugger, since Visual Studio didn't like debugging with Chrome (or vice versa?).

The attached image shows that the extra column is of class "sorting_1" and is applied to a css ::before area. Even if I explicitly disable sorting, the column still appears.

rdm

I ended up resolving the issue by completely deleting the MVC components (model, view, controller) and rebuilding from scratch. Remaking it from scratch seemed to do the trick. Maybe there was some subtle typo that neither I nor the compiler caught.

Thanks for everyone's help with this sanity check.

rdm

I finally figured it out. When I went in to add my ScrollSpy component, I learned that a CSS "::before" component was interfering with the DataTables css styling.

So the issue was competing code between two separate libraries. Not so obvious for me before because I was focusing on the code I wrote and not the code in other libraries.

colin

Thanks for letting us know! Always good to understand what causes these oddities!

C