How do I create a DataTable that has a dynamic column structure?

4

Hello, I need to create a DataTable in my MVC project that does not have predefined columns. The number of columns must be defined from the amount of data in a DB field.

I have a field in my Model that is called Low Tier Id, it is an FK from another table (Low Tier table). I need to create columns for each Low Tier Id that I have registered in the database. In addition, the columns can not have the Low Tier Id as the title, but the Low Tier Name field, which I should pull through FK.

The data that will appear in the fields will be from the Quantity field (this field is from the Base Hour table, the main one from the View). Each column should show the respective Quantity to the Low Tier Id of the column.

Until then, I was trying to create the columns in this way, but still without passing the data that the fields should show or the titles of the correct columns:

JAVASCRIPT

var colsBaseLT = [];
function CreateColumnsBH() {
$.ajax({
    url: urlLTList, //referencia o método LT List da Controller
    dataType: 'json',
    type: 'POST',
    aynsc: false,
    success: function (result) {
        //a result trás um array de Low Tier Ids
        //A função abaixo percorre o Array e tenta criar uma coluna para cada elemento dele
        var ltLength = result.length;
        for (var i = 0; i < ltLength; i++) {
            colsBaseLT.push({ data: null, orderable: false, className: 'col-sm-2 text-center', title: "titulo", defaultContent: '' });
        }
    }
});


function CreateTableBH() {
$.ajax({
    url: urlCreateTableBH, //referencia o método GetBaseHour da Controller
    type: 'POST',
    success: function (result) {
        dataTableBH = DataTablesAjaxScrollHeight('#tableBaseHour', colsBaseLT, result.Grid, null, "350px");
    }
}); 

$(document).ready(function () {
    CreateColumnsBH();
    DataTablesAjaxPagination("#tableBaseHour", colsBaseLT, null, null, 12, 'BaseHour');
    CreateTableBH();
}

CONTROLLER (C #)

    public JsonResult GetBaseHour()
    {
        //pega os dados da tabela Base Hour, a principal da View
        return Json(new { Grid = new BaseHourBusiness().GetList<BaseHour>(Util.AuxiliaryMethods.BMPerRequestInstance)});
    }

    public JsonResult LTList()
    {
        var lowTierList = new LowTierBusiness().GetList<LowTier>(Util.AuxiliaryMethods.BMPerRequestInstance).Select(
                s => new
                {
                    s.Name
                }).ToList();
        //no Join acima eu tento pegar os LowTierNames presentes na tabela Low Tier
        return Json(lowTierList);
    }

EDIT: To better exemplify the structure of the DataTable I want to create, I leave the following image:

The names in the columns are the Low Tier Names, fields that come from the Low Tier table. The BD table in this View is called Base Hour and it has a Low Tier table FK which is the Low Tier Id field.

I need to pull the Low Tier Names through the Low Tier IDs so that the columns can acquire these names, and of course build the columns according to the amount of Low Tier IDs.

The numbers, which are the fields in the table, come from the Quantity field. They should be shown according to the corresponding Low Tier ID of the column.

    
asked by anonymous 14.08.2018 / 14:55

1 answer

0

If I understand your question well, you just need to mount a grid / table with the dynamic data coming from the code-behind, correct?

If this is the case, then you do not use a Viewbag, with a list of its columns in order to mount your Table head. Next to this, do you pass another Viewbag with the results and put in a foreach to Razor your HTML to dynamically as soon as your Action is requested? Theoretically it would work for both a View and a _PartialView;

    
23.11.2018 / 18:12