Requested unknown parameter '0' for row 0, column 0.

VictorPearson

I'm using DataTables and Editor and am getting this dialog popup:

"DataTables warning: table id=ImmigrationNotes - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4"

And when I click to make it go away, the table shows up with the correct number of records yet, there is no text in any of the fields.

No colspan or rowspan in the tbody. The number of columns are equal in the header and table body and are what's in the HTML.

What more can cause the warning? and Why does the correct number of rows show up but no text in any cell?

colin

Hi Victor,

Yep, definitely not the most actionable error message!

To progress this, would you be able to provide some more information please, such as some DataTables debugging and any code snippets that you are able to share.

Cheers,

Colin

tangerine

please see http://datatables.net/tn/4

That page provides the diagnostic steps necessary to identify the error.

VictorPearson

Thank you for pointing me to DataTables debugging! It pointed out that I needed to update some versions however, I still get the error: Requested unknown parameter '0' for row 0, column 0.

The data is actually correct in the debug yet the data does not show in the page but the records do.

Here is the debugging.
http://debug.datatables.net/afeduh

CSHTML

<div class="content">
    <div class="hpanel table-responsive">
        <div class="panel-body table-responsive">
            <table id="ImmigrationNotes" class="table display table-hover table-bordered table-bordered table-striped" cellspacing="0">
                <thead>
                    <tr>
                        <th>
                            Advised Date
                        </th>
                        <th>
                            Action Given
                        </th>
                        <th>
                            Advise Type
                        </th>
                        <th>
                            Notes
                        </th>
                        <th>
                            Source
                        </th>
                        <th>
                            School ID
                        </th>
                        <th>
                            Student ID
                        </th>
                        <th>
                            Advise ID
                        </th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>
                            Advised Date
                        </th>
                        <th>
                            Action Given
                        </th>
                        <th>
                            Advise Type
                        </th>
                        <th>
                            Notes
                        </th>
                        <th>
                            Source
                        </th>
                        <th>
                            School ID
                        </th>
                        <th>
                            Student ID
                        </th>
                        <th>
                            Advise ID
                        </th>
                    </tr>
                </tfoot>
            </table>
        </div>
   </div>
</div>


<script type="text/javascript">

    //var editor; // use a global for the submit and return data rendering in the examples

    $(document).ready(function () {

           editor = new $.fn.dataTable.Editor({
                ajax: "/api/StudentImmigrationNotesDT",
                model: "StudentImmigrationNotesModel",
                table: "#ImmigrationNotes",
                fields: [{
                        label: "Advised Date:",
                        name: "imnAdvisingDate",
                        type: "datetime"
                }, {
                        label: "Action Given:",
                        name: "imnAdvisingAction",
                }, {
                        label: "Advise Type:",
                        name: "imnAdvisingType",
               }, {
                        label: "Note:",
                        name: "imnAdvisingNote",
                }, {
                    label: "Source:",
                    name: "imnAdvisingSource",
               }, {
                   label: "School ID:",
                   name: "imnSchoolMasterID",
                }, {
                    label: "Student ID:",
                    name: "imnStudentID",
               }, {
                   label: "Advise ID:",
                   name: "imnAdvisingID",
               }
                ]

            });

            // setup and establish the DataTable
            $("#ImmigrationNotes").DataTable({
                ajax: "/api/StudentImmigrationNotesDT",
                model: "StudentImmigrationNotesModel",
                // this sets the feedback text
                "oLanguage": {
                    //"sUrl": "media/language/de_DE.txt",
                    "sZeroRecords": "No records match your search criterion.",
                    "sLengthMenu": "Display _MENU_ records per page.",
                    "sInfo": "Displaying _START_ to _END_ of _TOTAL_ records.",
                    "sInfoEmpty": "Showing 0 to 0 of 0 records.",
                    "sInfoFiltered": "(Filtered from _MAX_ total records.)"
                },
                // this is for the copy, export to Excel, Print and PDF
                //dom: '<"top"fil<"toolbar">p>rt<"bottom"Bil>',
                dom: '<"top"<"toolbar">fl>rt<"bottom"Bpi>',
                buttons: [
                    {
                        extend: 'copyHtml5',
                        //ButtonText: 'Copy Page',
                        exportOptions: {
                            rows: ':visible',
                            columns: ':visible'
                        },
                    },
                    {
                        extend: 'csvHtml5',
                        //ButtonText: "Export to CSV",
                        exportOptions: {
                            rows: ':visible',
                            columns: ':visible'
                        },

                    },
                    {
                        extend: 'excelHtml5',
                        //ButtonText: "Export to CSV",
                        exportOptions: {
                            rows: ':visible',
                            columns: ':visible'
                        },
                    },
                    {
                        extend: 'pdfHtml5',
                        //ButtonText: "PDF",
                        exportOptions: {
                            rows: ':visible',
                            columns: ':visible'
                        },
                    },
                    {
                        extend: 'print',
                        //ButtonText: "Print",
                        exportOptions: {
                            rows: ':visible',
                            columns: ':visible'
                        },
                    },
                    //'selectedSingle',
                    'selectAll',
                    'selectNone',
                    //'selectRows',
                    //'selectColumns',
                    //'selectCells',

                    //// this hides or shows columns
                    //{
                    //    extend: 'collection',
                    //    text: 'Toggle Visibility',
                    //    buttons: [
                    //        {
                    //            text: 'Recalled',
                    //            action: function (e, dt, node, config) {
                    //                dt.column(6).visible(!dt.column(6).visible());
                    //            }
                    //        },
                    //        {
                    //            text: 'Action',
                    //            action: function (e, dt, node, config) {
                    //                dt.column(7).visible(!dt.column(7).visible());
                    //            }
                    //        }
                    //    ]
                    //},

                    { extend: "create", editor: editor },
                    { extend: "edit", editor: editor },
                    { extend: "remove", editor: editor }

                ],

                // default settings
                keys: true,
                info: true,
                sort: true,
                searching: true,
                select: true,
                ordering: true,
                order: [[1, 'asc']],
                scrollY: '50vh',
                scrollX: true,
                scrollCollapse: true,
                bJQueryUI: true,
                sPaginationType: "full_numbers",
                displayStart: 0,
                stateSave: true,
                autoWidth: false,
                paging: true,
                fixedHeader: true,
                fixedColumns: false,
                columnReorder: true,

                //columnDefs: [
                //             { width: '20%', targets: 0 }
                //            ],
                lengthMenu: [[1, 5, 10, 25, 50, 100, -1], [1, 5, 10, 25, 50, 100, "All"]],
                iCookieDuration: 60 * 60 * 24, // 1 day keep cookie
            });

            // to have a custom toolbar message show
            $("div.toolbar").html('<b>@ViewBag.Title</b>');


    });
</script>

EDIT: Reformatted code using Markdown.

VictorPearson

CONTROLLER
using System.Web;
using System.Web.Http;
using System.Data.SqlClient;
using System.Web.Configuration;
using DataTables;
using school_MVC.Models;

namespace school_MVC.Controllers
{
public class StudentImmigrationNotesDTController : ApiController
{
// GET: Student Immigration Note Info
[HttpGet, HttpPost, Route("api/StudentImmigrationNotes")]
public IHttpActionResult StudentImmigrationNotes()
{
var request = HttpContext.Current.Request;
var sqlType = oluko_MVC.Variables.strOlukoSQLType;
SqlConnection connectionSQL = new SqlConnection(WebConfigurationManager.ConnectionStrings["olukoDataTablesSQLConnection"].ConnectionString);

        using (var db = new Database(sqlType, connectionSQL))

        {
            var response = new Editor(db, "tblImmigrationNotes", new[] { "imnImmigrationNoteID" })
                .TryCatch(true)
                .Model<StudentImmigrationNotesModel>()
                .Field(new Field("imnAdvisingDate")
                    .Validator(Validation.DateFormat(
                        Format.DATE_ISO_8601,
                        new ValidationOpts { Message = "Please enter a date in the format yyyy-mm-dd" }
                    ))
                    .GetFormatter(Format.DateSqlToFormat(Format.DATE_ISO_8601))
                    .SetFormatter(Format.DateFormatToSql(Format.DATE_ISO_8601))
                )
                    .Field(new Field("imnStudentUserID")
                    .Validator(Validation.Required())
                )
                    .Field(new Field("imnSchoolMasterID")
                    .Validator(Validation.Required())
                )
                    .Field(new Field("imnAdvisingAction")
                    .Validator(Validation.NotEmpty())
                )
                    .Field(new Field("imnAdvisingType")
                    .Validator(Validation.NotEmpty())
                )
                    .Field(new Field("imnAdvisingSource")
                    .Validator(Validation.NotEmpty())
                )
                    .Field(new Field("imnAdvisingNote")
                    .Validator(Validation.NotEmpty())
                )
                // no more fields
                .Process(request)
                .Data();

            return Json(response);
        }
    }
}

}

MODEL
using DataTables;

namespace school.Models
{
public class StudentImmigrationNotesModel
{
[EditorTypeError("Immigration Note ID is Required INT")]
[EditorHttpName("Immigration Note ID")]
public int imnImmigrationNoteID { get; set; }
[EditorTypeError("Student ID is required GUID")]
[EditorHttpName("Student ID")]
public System.Guid imnStudentUserID { get; set; }
[EditorTypeError("School ID is required GUID")]
[EditorHttpName("School ID")]
public System.Guid imnSchoolMasterID { get; set; }
[EditorTypeError("Date Student was Advised is Required")]
[EditorHttpName("Advised Date")]
public System.DateTime imnAdvisingDate { get; set; }
[EditorTypeError("Advising Action Given")]
[EditorHttpName("Advising Action Given")]
public string imnAdvisingAction { get; set; }
[EditorTypeError("Advise Type")]
[EditorHttpName("Advise Type")]
public string imnAdvisingType { get; set; }
[EditorTypeError("Advise Notes")]
[EditorHttpName("Advise Notes")]
public string imnAdvisingNote { get; set; }
[EditorTypeError("Advise Source")]
[EditorHttpName("Advise Source")]
public string imnAdvisingSource { get; set; }
}
}

kthorngren

The problem is you are returning an array of objects:

    "data": [{
        "DT_RowId": "row_4",
        "Advised Date": "2017-12-10T00:00:00",
        "Student ID": "271b0c04-ab9f-488a-991c-f501cf7f9339",
        "School ID": "f8658330-c856-4b8e-b556-4fdd17111d02",
        "Advising Action Given": "Action to take...",
        "Advise Type": "Advising type here.",
        "Advise Source": "No Source",
        "Advise Notes": "This is the note",
        "Immigration Note ID": 4
    }, {
        "DT_RowId": "row_8",
        "Advised Date": "2017-12-10T00:00:00",
        "Student ID": "271b0c04-ab9f-488a-991c-f501cf7f9339",
        "School ID": "f8658330-c856-4b8e-b556-4fdd17111d02",
        "Advising Action Given": "Action to not take...",
        "Advise Type": "Advising type is here.",
        "Advise Source": "That Source",
        "Advise Notes": "This is the second note",
        "Immigration Note ID": 8
    }],

But you haven't used columns.data to define the objects. Without this config Datatables is expecting an array containing arrays. More info can be found here:
https://datatables.net/manual/data/#Data-source-types

Kevin

VictorPearson

Thank you for helping figure out the issue.

I am a new developer and am lost... I went through the examples given for columns.data and the link for Data-source-types and still cannot get it to work.

What is it I need to add and where do I need to add it?

colin

Thanks for that, Kevin, that's a good spot.

Victor, please take a look at https://datatables.net/manual/data/#Objects. As Kevin said, you need to define columns.data - the example on that page is

$('#example').DataTable( {
    data: data,
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'salary' },
        { data: 'office' }
    ]
} );

so you would just slot your column definitions into your code. Hope that helps, if not, please get back in touch.

And a Merry Christmas to all if we don't speak before!

Cheers,

Colin

VictorPearson

Okay, got it to work! Thank you all for helping!

It's a bit different though than the example given in how I got it to work... I couldn't use
data: data,
because it gave error data not defined.

So, I tinkered a bit and commented out the data: data line and it worked!

Here's what worked (note the commented out //data: data):

   // setup and establish DataTable
        $("#ImmigrationNotes").DataTable({
            ajax: "/api/StudentImmigrationNotesDT",
            model: "StudentImmigrationNotesModel",
            // the columns used
            //data: data,
            columns: [
                { data: 'Advised Date:' },
                { data: 'Action Given:' },
                { data: 'Advise Type:' },
                { data: 'Advise Note:' },
                { data: 'Advise Source:' },
                { data: 'School ID:' },
                { data: 'Student ID:' },
                { data: 'Immigration Note ID' }
          ]

} );

now I have an Editor question I'll put in a different thread.

Merry Christmas to everyone!

kthorngren

data: data,

Is in the example because the example is essentially showing assigning the object data to a variable data. Since you are using an ajax request you don't want to use data: data.

Kevin

VictorPearson

Kevin, that would be helpful stated/shown in the examples because that's what got me confused... though I'm easily confused sometimes!

Thank you for your help!

I'm not sure how to mark this issue as answered so it can be closed?

allan

Noted - I'll add a little comment about that in the documentation. Thanks for the feedback.

Allan

Eduardo_Brv

ayuda no puedo cargar datos de un controlador este el código
/////////////////

[HttpPost]
public JsonResult tablaPedidos()
{

        ProductosPendientes productosPendientes = new ProductosPendientes();
        if (productosPendientes.IdCliente == 0)
        {
            UsuarioDTO UserResultado = JsonConvert.DeserializeObject<UsuarioDTO>(LeerSession("SessionActiva"));
            productosPendientes.IdCliente = UserResultado.usuario.IdCliente;
            objetos.ObjetoDeserializar = productosPendientes;
        }


        StoreProcedure storeProcedure = new StoreProcedure();
        storeProcedure.Name = "SPHistorialPedidos";
        storeProcedure.ParameterName.Add("_idCliente");
        storeProcedure.ParametersValues.Add(productosPendientes.IdCliente);

        objetos.ObjetoDeserializar = storeProcedure;
        objetos.ApiTipoPeticion = TipoDePeticion.POST;
        objetos.ApiRutaPeticion = "SpComercioElectronico/SpHistorialPedidos";
        objetos = RealizarPeticionApi(objetos); 

        List<SpHistorialPedidos> pedidoListado = JsonConvert.DeserializeObject<List<SpHistorialPedidos>>(objetos.jsonRespuestaServidor);
        var data = JsonConvert.SerializeObject(pedidoListado);
        return  new JsonResult(data);



    }

Eduardo_Brv

y la petición es esta

 $("#tablaProductos").DataTable({

destroy:true,
responsive:true,
"ajax":
{
    "type":'POST',
    "url":'/ComercioElectronico/tablaPedidos',
    "contentType":'application/json; charset=utf-8',
    "dataType":'json',
    "dataSrc": ""
},
    "columnDefs":
[
    {"data": "id"},
    {"data":"fecha"},
    {"data":"estatus"}
]

});

Eduardo_Brv

Eduardo_Brv

me sale ese tipo de error cómo puedo solucionarlo?

colin

@Eduardo_Brv I would suggest following the instruction in the technical note linked to in the error. It looks like you're declaring columns with names like id, fecha, and estatus - but I'm not seeing those in the controller code.

Colin