Setting Data to read from DOM

razzbossontheshow · August 2022

I have been trying to set my DataTable() to read data from the table DOM. The Data on the Table DOM was processed using the ssp.class SSP::Simple().

Now, i am trying to set the Data on the DataTable so that it can be passed to the Editor, and also to be deleted. Please, can anyone help me with this?

(Here is my code)

        $('#table_id').DataTable( {
            "processing": true,
            "serverSide": true,
            "ajax": {"url": "inc.config.php", "type":"GET"}, // SSP::Simple() processed Data to the Table DOM.
            "aoColumns": [
                { "mData": "id" },
                { "mData": "catchers" },
                { "mData": "catch_code" },
                { "mData": "user_type" },
                { "mData": "logs" }
            ]
        });

kthorngren · August 2022

Not sure I follow what you are saying. But the code snippet looks like it should work. You are using legacy naming convention for aoColumns and mData. They are now columns and data. See the columns and columns.data docs. However the legacy options are still supported.

Now, i am trying to set the Data on the DataTable so that it can be passed to the Editor, and also to be deleted. Please, can anyone help me with this?

Here is an example showing server side processing with Editor.

Please provide more specifics about the issues you are having and any errors you are getting.

Kevin

razzbossontheshow · August 2022

@kthorngren I am getting this error.
DataTables warning: table id=table_id - Requested unknown parameter 'id' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

When i used column and data, i get a blue loader WITHOUT the Data on the Table showing. When i use type POST, i only get the blue loader without the page showing but no error thrown.

When i use the type:"GET", then i get the error which i showed to you above.

I have an SSP.CLASS file which was included into my inc.config.php (here, my datatbase connection resides. My Data on the table was automatically loaded using the code below.

        $('#table_id').DataTable( {
            "processing": true,
            "serverSide": true,
            "ajax": {"url": "inc.config.php", "type":"GET"},
        });

And, it was working fine. I wanted to add the columns data to this DataTabke initialization so that it can enable me to delete from the table using DataTable Editor.

I already have Editor, but i am having a difficul time initializing the columns. I always get that error about unknown parameter. I have searched , and the response aren't helping.

razzbossontheshow · August 2022

@kthorngren And also, the link you shared about the examples on server processing. I went there, copied it, edited to look exactly as it should, but i didn't get any warnings, no blue loader, just NOTHING. No Data. It silently failed.

kthorngren · August 2022

If your setup works columns.data defined then you have array structured data. I'm not familiar with PHP but you will need to change your server script to object structured data. See the ajax docss for more details.

Kevin

allan · August 2022

If you have Editor, forget the SSP class. The Editor PHP libraries fully support server-side processing.

Allan

razzbossontheshow · August 2022

@allan , I implemented the Editor PHP Library to fetch Data from my Datatbase but i get an invalid json response. I tried to include the application/json as a contentType request, but i get a silent failure. The whole thing is becoming exhausting to me. Spent more than a week now on DatatTables. Damn!

kthorngren · August 2022

Did you follow the troubleshooting steps at the link in the Invalid JSON response error?
https://datatables.net/manual/tech-notes/1

What did you find in the response?

Kevin

razzbossontheshow · August 2022

@kthorngren Honestly, i don't want to go anymore further on Editor. I just want to be able to delete a row. That is all. I need you to help me with that.
Here is my code

$('#table_id').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": {"url": "inc.config.php", "type":"GET"}, // your php file
        "aoColumns": [
        { "sName": "id" },
        { "sName": "catchers" },
        { "sName": "catch_code" },
        { "sName": "user_type" },
        { "sName": "logs" },
        {
            "sName": null,
            "bSearchable": false,
            "bSortable": false,
            "mRender": function (data, type, row) {

                return '<a OnClick="DeleteBtn('+ data +')" ><i class="fa fa-trash"></i></a>';

            }
        }

    ]
});



function DeleteBtn(id) {

    if(confirm("Do you want to Remove "+id+"?")){
         $.ajax({
             url: './del.php',
             type: 'GET',
             data:{id:id},
             error: function(){
             alert("something went wromg");
                 },
             success: function(e){
             $('#'+id).remove();
                 }
             });
    }
}

The "id" seems to be undefined here. Please, can you check my code and make adjustment where necessary? . Thank you

kthorngren · August 2022

Seems like you are trying to create your own custom editing code with the DeleteBtn() function. The Editor has all that built-in. Take a look at the example I posted and try deleting a row. The Editor handles this for you. Are you trying to use the Editor library or create your own?

This example shows how to use edit and delete buttons in each row. In this case you would create some event handlers but the example shows how.

Kevin

allan · August 2022

If you don't want to use Editor, and you do what you delete a row in a DataTable, use the row().remove() method. Obviously you'd need to do the Ajax call and have a server-side script that does the actual delete in the dataase.

Allan

razzbossontheshow · August 2022

@allan , I have tried to use this since yesterday, but it doesn't even remove it from the DOM. And also, if for instance, it removes it, how do i get the "id" which will be used for the deletion?

The Ajax url on my DataTables was used to load the data into the Table. Can i still use this same path for deletion of data? I feel it wouldn't work that way. But i don't know how to make this work.

I just need to get the ID which will be used to process deletion. Please, can you write a sample code for me based on my DataTable outline as i sent to you. This is really a bottleneck for me.

allan · August 2022

Do your rows (tr) have an id? If so then table.row('#myId').remove().draw() is all that is needed to remove it on the client-side. That doesn't do anything with the server though.

Can i still use this same path for deletion of data?

If your Ajax script can do a delete sure. I don't know if it can. That's how Editor's works - it sends an action property tell the server side script what it is going to do.

Please, can you write a sample code for me based on my DataTable outline as i sent to you

Editor is our supported editing solution for DataTables.

Allan

Setting Data to read from DOM

Setting Data to read from DOM

Replies

Howdy, Stranger!

Categories

DataTables

Setting Data to read from DOM

Setting Data to read from DOM

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables