Datatables wont let me debug rowCallback

gilbertgilbert

            brend = document.getElementById("brand").value;
            category = document.getElementById("category").value;       
            var ul = null;
            
            var table =                                 
                    $('#example').dataTable({
                        "sAjaxSource": "dataProductUserList/"+brend+"/"+category,
                        "sAjaxDataProp": "",
                        "bDestroy": true,
                        "bProcessing": true,
                        "bServerSide": true,
                        "aoColumns": [
                                { "mData": "product_name" },
                                { "mData": "cover" }
                        ],
                        "initComplete": function(settings, json) {
                            // show new container for data                          
                            $('#new-list').insertBefore('#example');
                            $('#new-list').show();
                        },
                        "rowCallback": function( row, data ) {
                            console.log('rowCallback called'); // Debug statement
                            // on each row callback                                 
                            if(ul == null){
                                ul = document.createElement('ul');
                                ul.setAttribute('id','new-list');                           
                                var getTable = document.getElementById("temp");
                                getTable.insertBefore(ul,null);
                            }                             
                            var li = $(document.createElement('li'));                                                   
                            li.append('<a target="_blank" href=userProductDetail/'+data.product_id+'><img src="' + data.cover + '"/></a>');
                            li.append('<a target="_blank" style="text-decoration: none;" href=userProductDetail/'+data.product_id+'><p style="font-size: 12px;color: black;">' + data.product_name + '</p></a>');
//                          
                            li.appendTo(ul);
                            $("li").css("height", "200px");
                            $("li").css("border", "0");
                        },
                        "preDrawCallback": function( settings ) {
                            // clear list before draw
                            $('#new-list').empty();
                        }
                    });

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

gilbertgilbert

sorry im still new to making a post , so when im trying to debug my javascript using inspect element , it wont let me debug the rowCallback it goes to predrawcallback and immediately goes to initComplete , what should i do?

gilbertgilbert

here is my data for the datatables

{
    "sEcho": 0,
    "iTotalRecords": 74,
    "iTotalDisplayRecords": 74,
    "aaData": [
        {
            "product_id": 1011633,
            "item_code": "RSG100-3",
            "brand_name": null,
            "product_category_name": null,
            "description": null,
            "is_active": false,
            "created_date": null,
            "updated_date": null,
            "product_name": "aaa,
            "product_category_id": null,
            "cover": "asd",
            "pricelist": null,
            "qty": null,
            "uomname": null
        }
]
}

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

sEcho (or draw if you weren't using the legacy options) should never be 0. It should return what is sent to the server (cast as an integer for security). So that might be part of the issue. See the manual for more details on the draw property.

trying to debug my javascript using inspect element ,

You can't debug Javascript using "Inspect element". You could place a break point in the rowCallback function using the "Scripts" or "Debugger" tab in your browser's inspector though.

Beyond that it is hard to say. Perhaps you can detail the issue you are trying to solve along with a link to a test case showing the issue?

Allan

gilbertgilbert

thanks Allan for the reply , and yes sorry i mean place a breakpoint and see where my codes go.

so , when my data was like this ,

[
{
"product_id": 1011633,
"item_code": "RSG100-3",
"brand_name": null,
"product_category_name": null,
"description": null,
"is_active": false,
"created_date": null,
"updated_date": null,
"product_name": "aaa",
"product_category_id": null,
"cover": "asd",
"pricelist": null,
"qty": null,
"uomname": null
}
]

it work properly , the rowCallback is getting called , but the " Show Entries " and " Next / Previous " button is not working , because im not sending the total record etc.

but when im trying to send the total record etc, i mean with this data :

{
"sEcho": 0,
"iTotalRecords": 74,
"iTotalDisplayRecords": 74,
"aaData": [
{
"product_id": 1011633,
"item_code": "RSG100-3",
"brand_name": null,
"product_category_name": null,
"description": null,
"is_active": false,
"created_date": null,
"updated_date": null,
"product_name": "aaa,
"product_category_id": null,
"cover": "asd",
"pricelist": null,
"qty": null,
"uomname": null
}
]
}

the rowCallback is not getting called, i mean , it wont hit the breakpoint even tho i already put it in there , please help

allan

Probably because of the sEcho: 0. That is undefined behaviour and will break things.

Do you actually need server-side processing? Do you have tends of thousands of records?

With your first JSON response you'd configure DataTables like this:

ajax: {
  url: "dataProductUserList/"+brend+"/"+category,
  dataSrc: ''
},
// ...

Allan