Remove row without row selection??

Remove row without row selection??

gbrentgbrent Posts: 7Questions: 2Answers: 0
edited November 2009 in General
I have some data pulling from the server and populating the table simply with a php while loop printing out :

information1
information2
Delete


deleteThisRow does an XHR to a php file that deletes the row in MySQL equaling mysqlRowID. The php file will return back true if it was deleted successfully. This is where I want to delete the actual row from the table however, I do not have row selection on nor do I want it on. The example in the docs gets the row by which one is selected and then deletes that one.

So, I guess my questions are:
Is there a simple way to get the row without using fnGetSelected( oTable )? It looks like that function is just finding the row that has a class applied to it. I want the data for each row tied to onclick

Furthermore, if I did decide to use row selection I would have a few issues...
1. If I want a delete link on every row, I can not give them all an ID of #delete. That causes issues with $('#delete').click
2. If I overcome the id="delete" on every line issue, the problem arises that when someone clicks on a link in a row, that does not select the row. Therefore, if there was a delete link that was tied to deleting a selected row, someone would have to select the row then click the delete link.

Can you give me some input on how I can do this? I am a php programmer and a JS programmer but I struggle with JS a little bit so try to dumb it down for me a little.
Thanks so much
-B

Replies

  • m.rossm.ross Posts: 5Questions: 0Answers: 0
    Couple of thoughts...

    First, rather than putting an anchor with an onclick assignment into your delete cell,
    why not just put the text 'delete' in, and give your delete cells a class of 'delete' (or similar).
    Then you could put your click event on the cells by using a jQuery construct such as:

    [code]$('#tableid td.delete').click(function(){
    code 1: process your ajax db delete;
    code 2: delete the dataTable row.
    });[/code]
    note: code 2 should probably be located in the ajax callback function.

    Second, to delete the dataTable row:

    Use the click on the delete cell to get a reference to the cell's parent TR node
    [code]nTr = this.parentNode;[/code]

    Then, use nTr as the parameter to fnGetPosition, and use that as the parameter to fnDeleteRow, like this:
    [code] oTable.fnDeleteRow( oTable.fnGetPosition( nTr ) ) ;[/code]
  • gbrentgbrent Posts: 7Questions: 2Answers: 0
    Well I started trying that but then the whole cell was clickable. I also have some other links I want to put in there that do different things but, I did find a solution that works.

    First, whenever I add a row, I insert blank data for the delete field then update it with getelementbyid after I know the records position in aoData. I do it this way because the deleteContact function takes 2 args: row pos in aoData, and the mysql record ID. I know, it looks like a hack but I did not know another way to get this step done...
    [code]
    var chars = "01234567890123456789abcdefghiklmnopqrstuvwxyz";
    var string_length = 8;
    var randomstring = '';
    for (var i=0; i
  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Hi guys,

    If I might throw another option into the ring - if you have deleted the row on the server-side and the response has come back, all you need to do is find the row with that ID and call fnDeleteRow() on it, right? So there are two ways I can think of to find the row from what you currently have:

    1. Grab fnGetData(), parse through it and find your ID. You might then need to do a little conversion to get your TR element, but that should be fairly quick.

    2. Simply add an ID of "row_{id}" to each TR element. Then all your need to do is fnDeleteRow( document.getElementById('row_'+id) );. This seems like quite a good solution to me - as long as you are willing to make that small change to your HTML.

    Regards,
    Allan
  • m.rossm.ross Posts: 5Questions: 0Answers: 0
    Hi Allan,

    Agreed -- putting the record id into the TR's id attribute is my standard solution.

    One thing though...the documentation says that fnDeleteRow expects to receive a row index integer, which
    should generally be retrieved with fnGetPosition.
    So, I'm thinking it's: fnDeleteRow( fnGetPosition( document.getElementById('row_'+id) ))

    michael
  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Hi Michael,

    Gah - my mistake! Thanks for catching that! I always get them mixed up... I think I might make the input overloaded in future (i.e. cope with either an integer index or a node to avoid embarrassing myself like this) :-).

    Regards,
    Allan
  • m.rossm.ross Posts: 5Questions: 0Answers: 0
    No problem -- I've been working this week on a dataTables-based multiple results-tabs search/maintenance thingy, so the API is pretty fresh in mind. Still, I had to look at it three times before I realized why it looked funny.

    michael
This discussion has been closed.