dataTable with LABEL instead of a Column

reidcor

Sorry but I think I'm going to "break rules" right off. I do not have a link because I'm developing for a future project. It is currently only on my VS designer and localhost for testing.

Below will be my script for a dataTable in an MVC application. It utilizes a parameterized url to a controller action. This is because I want to produce a "segregated" dataTable, rather than a "GetAll". It works perfectly, but one of the columns in the returned json is called "MetroArea" and it would be the same on every row, (i.e; "Denver"). So, rather than have this column, I want to place a label on the view, above the dataTable, that reads "Search Results For: xxx" where the value would come from the "MetroArea" element of the returned json.

Two questions: Is this possible with my script? If so, I'd like a suggestion. You will see part of the ajax contains a "dataSrc" callback someone suggested to me, but I now think that is not the correct way to achieve this.Second question: should I abandon this idea and have my controller action handle the label value from the results of the sql query?

Thanks much for looking at this and any insights.

$(document).ready(function () {
        $("#MetroListDiv").hide();

        $("#Searchbtn").click(function () {
            $("#MetroListDiv").show();
            $("#ZipInputDiv").hide();

            var ZipCode = $("#ZipCode").val();

            $("#ProvidersTable").DataTable({

                "ajax": {
                    "url": "/Providers/GetProvidersByMetro?ZipCode=" + ZipCode,
                    "dataSrc": function (json) {
                        for (var i = 0, ien = json.data.length; i < ien; i++) {
                            json.data[i][0] = $("#CityLbl").text('Search Results For:  ' + json.data[i][0]);
                        }
                        return json.data;
                        
                    }
                    
                },
                "columns": [
                    { "data": "UserName" },
                    { "data": "LocName" },
                    {
                        "data": "Amount",
                        'render': $.fn.dataTable.render.number(',', '.', 2, '$' + '&nbsp;&nbsp;')

                    },
                    {
                        "data": "TransDate",
                        'render': function (jsonDate) {
                            var date = new Date(parseInt(jsonDate.substr(6)));
                            var month = date.getMonth() + 1;
                            return month + "/" + date.getDate() + "/" + date.getFullYear();
                        }
                    }
            ***here is where "MetroArea" column would be in the script, but I want to capture it from the first row of returned json,
                       OUTSIDE of the "datatable" function, to use as a label for the page***
                ]

            });

        });

    })

kthorngren

A couple options come to mind:

1. The RowGroup Extension could be used on the MetroArea column to effectively display info about that column as the first row in the table.
2. You could return it in each row of data but not assign it to a column. The data would just be available for each row. And use the ajax.dataSrc as a function like you have above. Not sure you need the for loop. You might be able to just use something like this: $("#CityLbl").text('Search Results For: ' + json.data[0].MetroArea); to access just the first array object.
3. Instead of returning MetroArea in each row (you could still do this) return it in a different object in your JSON. Then in the ajax.dataSrc function just access that object to place on your page. Would require a bit of extra work on the server script side.

I'm guessing option 2 is the best (which you mostly have it appears).

Kevin

reidcor

Kevin: THANK YOU SO MUCH!!!

It is usually an easy answer, but one that is hidden from a newby. Here is what I did that worked:

"dataSrc": function (json) {
                        $("#CityLbl").text('Search Results For:  ' + json.data[0].MetroArea + '  Metro Area');
                        return json.data;
                    },