Drawing a table after stripping JSON of HTML

matthean

I define the search here. I get the data I want back.

var data = $.ajax({
                type: "POST",
                contentType: "application/json; charset=unicode",
                url: '<%= ("aop.aspx/GetData") %>',
                data: "{'avzid': '" + aid + "',  'authorfname': '" + authorfname + "','authorlname': '" + authorlname + "','generalsearch': '" + generalsearch + "'}",                
                dataType: "json",
                async: false
            })

I then define my table as such.

var table = $('#dtable').dataTable({
                "retrieve": true,
                "columnDefs": [
                    {
                        type: "html", target: 0
                    }
                ]
            });

I then define the draw aspect, but I am getting the error of clear function not being defined.
table.clear().draw();

I eventually switch over to this statement, but it generates the error 'Cannot read properties of undefined (reading 'fnDraw')'
table.fnClearTable().fnDraw();

If I use the basic draw() function it gives me a similar 'Cannot read properties of undefined (reading 'draw')' error.

What functions am I suppose to use in order to draw the table?

kthorngren

I believe this FAQ describes your issue.

Kevin

matthean

It got me past that error. I ran it again and got an error saying, Uncaught SyntaxError: "[object Object]" is not valid JSON." I went and did a console.log to find what the type was and then added in a 'data = JSON.stringify(data)' statement. I reran it and I now get an error saying "Cannot use 'in' operator to search for 'length'" I feel like I am in a bit of Catch-22 in terms of what type it need to be. Here's the code and it blows up in the each statement area.

var i = 0;
            var j = [];

            var dataSet = JSON.parse(data);

            $.each(dataSet, function (key, value1) {
                $.each(value1, function (key, value) {
                    j[i] = value;
                    i++;
                });
                table.row.add([null,j[0], j[1], j[2], j[3], j[4]]).draw();
                i = 0;
                j = [];
            });

kthorngren

Its hard to say without seeing what you have. Can you post an example of your dataSet variable?

Kevin

matthean

response JSON: {d: Array(1)}
response text: "{\"d\":[{\"DocumentNumber\":\"AOP@20070724-090230\",\"

kthorngren

Looks like your row data is object based. So you can use columns.data to define the columns. Then you should be able to use rows.add() with an s. Something like this:

var dataSet = JSON.parse(data);

table.rows.add( dataSet.d );

Kevin

matthean

Sorry for the delay. I started to try and switch it over, but I kept getting the same error. Here's the complete function.

$('#search').click(function () {
            var avzid = "";
            var authorfname = "";
            var authorlname = "";
            var generalsearch = "";

            avzid += $('#txtAuthorVZID').val();
            authorfname += $('#txtAuthorFname').val();
            authorlname += $('#txtAuthorLname ').val();
            generalsearch += $('#txtGenSearch').val();

            var data = $.ajax({
                type: "POST",
                contentType: "application/json; charset=unicode",
                url: '<%= ("aop.aspx/GetData") %>',
                data: "{'avzid': '" + avzid + "',  'authorfname': '" + authorfname + "','authorlname': '" + authorlname + "','generalsearch': '" + generalsearch + "'}",                
                dataType: "json",
                async: false
            })

            data = JSON.stringify(data)

            var table = $('#dtable').DataTable({
                "retrieve": true,
                "columnDefs": [
                    {
                        type: "html", "targets": [0],
                        "data": null
                    }
                ]
            });

            table.clear().draw();

            var i = 0;
            var j = [];

            var dataSet = JSON.parse(data);
            table.rows.add(dataSet.d);
            console.log("Type Of: " + typeof (dataSet));
            console.log({ dataSet });

            $.each(dataSet, function (key, value1) {
                $.each(value1, function (key, value) {
                    j[i] = value;
                    i++;
                });
                table.row.add([null,j[0], j[1], j[2], j[3], j[4]]).draw();
                i = 0;
                j = [];
            });

            columns: [
                        {
                            "className": 'dt-control',
                            "orderable": false,
                            "data": null,
                            "defaultContent": ''
                        },
                        { "data": "Document Number" },
                        { "data": "Author" },
                        { "data": "Title" },
                        { "data": "General Policy" },
                        { "data": "Description" }
            ]
        });

kthorngren

var data = $.ajax({ .. });

This returns the jqXHR object which contains more than just the response data. You will probably want to read up on how jQuery ajax() works. There are lots of tutorials explaining the basics of ajax.

Use the success function to process the response data. And remove the async: false. I built a simple example to demonstrate.
https://live.datatables.net/coqovinu/1/edit

table.row.add([null,j[0], j[1], j[2], j[3], j[4]]).draw();

This won't work as you are telling Datatables you have object based data with columns.data. See the Data Sources docs for details.

{ "data": "Document Number" },

Make sure the columns.data string matches the JSON response. Your response looks like {\"DocumentNumber\":\"AOP@20070724-090230\". There is not a space between Document and Number.

Kevin