Requested unknown parameter '0' for row 0, column 0. when using ajax

Requested unknown parameter '0' for row 0, column 0. when using ajax

ThyradorThyrador Posts: 10Questions: 3Answers: 0
edited January 2017 in Free community support

Hey there folks.

This is my first time using this datatable module since it seem to have all the features I need. My basis will be the ASP.NET-Framework with MVC pattern. Web API is consumed for aquiring data via ajax.

But I kinda struggle implementing it. It doesn't work as expected.

Data-sources can vary, so even columns have to be populated at runtime. I didn't found a way to do this with this module, so I created a table with headers populating the model, I am using.
This way I only need to add the data.

Below I'll show a few examples, for better understanding:

Ajax call:

ajax: {
                    url: '../api/session/@Session.SessionID/filecabinet/@Model.FileCabinet.Id/results/@Model.SearchId',
                    dataSrc: function (json) {
                        var obj = JSON.parse(json);
                        return obj.data;
                    }
                }

Sample data returned:

{
  "data": [
    {
      "Doc ID": "629",
      "File Count": "1",
      "Disk Number": "1",
      "Flags": "2",
      "Store Date": "24.06.2016 15:09:10",
      "Store User": "ADMIN",
      "Modification Date": "02.01.2017 09:09:21",
      "Modification User": "ADMIN",
      "Last Access Date": "02.01.2017 09:09:21",
      "Last Access User": "ADMIN",
      "Extension": ".txt",
      "Ablage in Buchhaltung": "TEST",
      "Ablagedatum": "",
      "Absender": "",
      "Abteilung": "PROFORMA 3: 0000000",
      "Aktennummer": "",
      "Aktenstatus": "",
      "Änderungsdatum": "",
      "Annehmer": "",
      "AutoIndex": "",
      "Barcode": "WDD",
      "Bearbeitet von:": "",
      "Beleg-Datum": "20.04.2015 00:00:00",
      "Belegtyp": "",
      "Bemerkung": "",
      "Buchungstext": "",
      "Empfänger": "",
      "Erstzulassung": "",
      "Eskalationsmanager": "",
      "Externe Belegnummer": "",
      "Fahrgestellnummer": "",
      "Fahrzeugtyp": "",
      "Filiale": "",
      "Firma": "",
      "Gescannt von:": "",
      "Geschäftsart": "",
      "GW-Nr.": "",
      "Herstellercode": "",
      "Indexiert von:": "",
      "Kennzeichen": "",
      "Konto-Kreditoren": "",
      "Kostenstelle": "",
      "Kreditorennummer": "180036",
      "Lieferscheinnummer": "",
      "Mandant": "",
      "Mandant_Fibu": "",
      "Marketingprojekte": "",
      "Name": "",
      "Name (2)": "",
      "Ort": "",
      "PLZ": "",
      "Rechnungsbetrag": "",
      "Register": "",
      "Saldo": "",
      "StateTabField": "",
      "Status": "",
      "Strasse": "",
      "Währung": "",
      "Weitergeleitet an:": "",
      "Wiedervorlage am:": ""
    }
  ]
}

Usually I would only send data that actually contains a value (no empty values) to reduce the payload of the call.
But either way, the error keeps the same.

HTML markup:

<table id="resultlist" class="table-striped table-condensed paginated" style="width: 100vw; background-color: #DDD; white-space: nowrap;display: none;">
        <thead class="header bg-primary" style="background-color: #337ab7;">
        <tr>
            @{
                if (!ViewContext.ViewData.ModelState.IsValid || !Model.FieldList.Any())
                {
                    <th class="no-sort" style="width: 100%; padding-top: 6px;"></th>
                }
                else
                {
                    if (Model.FieldList.Any())
                    {
                        var columns = Model.FieldList.OrderBy(c => c.OrderId);
                        var lastid = Model.FieldList.OrderBy(c => c.OrderId).Last().Id;
                        foreach (var col in columns)
                        {
                            <th style="padding-top: 6px; font-weight: normal;">@HttpUtility.HtmlDecode(col.FieldCaption)</th>
                        }
                    }
                }
            }
        </tr>
        </thead>
    </table>

This will populate the columns at runtime.

Any ideas what I am doing wrong?

Debug/Trace:
http://debug.datatables.net/esogas

I also need to know if it is possible to add a column as a template, lets say to contain a button or checkbox.
To be clear: I have to add 3 columns before each row, containing a checkbox, a button and a value (depending on what flag will be received from the database, which is not the problem here. Only the first 2 columns don't have to contain any data from the ajax call).
Since I can add the column names in my json result, I was hoping it will assign it properly, no matter if there is less data, than actual columns (empty values for example).

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,466Questions: 26Answers: 4,804

    You are returning the data as an object but it looks like you are not defining the columns in your Datatables initialization. In this case I think you would need to return the data as an array to populate each column in order.

    The Data source types doc will describe this. If you want to return as a data object then you will need to define your Datatables columns as shown here.

    Some of my tables are built at runtime and I create the columns structure and assign it during the Datatables initialization. Doping this you can also define your first three columns with checkboxes, etc.

    Kevin

  • ThyradorThyrador Posts: 10Questions: 3Answers: 0

    Thanks for your answer. Unfortunately I don't seem to get it right, or it doesn't fit my needs. As stated above, columns have to be populated automatically, because they can vary a lot (accessing multiple databases with different structures and depending on what a customer wants).
    What (i think to) understand is, that you have to define a "model" via the columns-property.
    On the other hand, the table headers were generated at runtime (via Razor).

  • kthorngrenkthorngren Posts: 20,466Questions: 26Answers: 4,804
    Answer ✓

    I'm not familiar with Razor but in your code above could you build a data array and append each column name in the format {"data": <column name>}? Maybe in the foreach (var col in columns) loop. Then in your Datatables init you can add the option columns: data.

    My environment is simple so my solution may not work for you.

    Kevin

  • ThyradorThyrador Posts: 10Questions: 3Answers: 0
    edited January 2017

    Ah, thanks for that suggestion. That way it works more like I want it.

    I still get the same error, except for another field. I'm checking what went wrong, so I'll report back soon and mark your comment as answer, if the problem will be solved by that :)

    EDIT: the datatable won't show any headers now and I still get the same error message, like stated above.

  • ThyradorThyrador Posts: 10Questions: 3Answers: 0
    edited January 2017

    Ok, I believe I found the issue: a column contains a decimal symbol "."
    That seem to cause this error to bugging me. May that be the reason, why the header row won't be displayed?

    EDIT: got that one fixed with the title attribute. :)

    Thanks for your help :)

  • allanallan Posts: 62,086Questions: 1Answers: 10,180 Site admin
    Answer ✓

    You can have a . in the columns.data values, you just need to escape it, otherwise DataTables will treat it as Javascript object notation and look for a nested value. The -init columns.data` documentation details how to escape it.

    Allan

  • ThyradorThyrador Posts: 10Questions: 3Answers: 0

    There we go, thank you. I should read more carefully, missed that totally :open_mouth:

This discussion has been closed.