button function

button function

antoniocibantoniocib Posts: 277Questions: 62Answers: 1

hello guys, I'll explain my problem I created a column where I inserted a button, but now I don't know how to create a function that when this button is clicked changes the background color to the row, I also created a field in the mysql table (int ), you can help me I don't know how to do it, sorry if the text can be spelled wrong but I'm using a translator.

        {data: null,
      defaultContent: '<input type="button" name="" value="Ritiro">',
           type: 'Ritiro'}
«1

Answers

  • colincolin Posts: 15,206Questions: 1Answers: 2,592

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1
  • colincolin Posts: 15,206Questions: 1Answers: 2,592

    That doesn't run, I'm afraid.

    Colin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    Can i send my website where it run and u can see?

  • kthorngrenkthorngren Posts: 20,583Questions: 26Answers: 4,823
    edited March 2020

    I updated one of my button examples to show how one way to highlight the row clicked:
    http://live.datatables.net/yocaheli/1/edit

    Note the CSS included in the CSS tab.

    Kevin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    Okay kevin, for this its okay but this button must to sent it to database because if i reload the page the background leave

  • kthorngrenkthorngren Posts: 20,583Questions: 26Answers: 4,823

    You asked how to highlight the row which is what I showed. The click function shows how to get the row data. If you want to send the row ID to the DB then use jQuery ajax to send the ID to the server script to update the DB.

    Or are you wanting to use the Select extension? With select you can use ajax.reload() and Datatables will re-select the rows after the data is loaded. You need to use the rowId option for this to work.

    Maybe you can describe in more detail what you are trying to do.

    Kevin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    So, I need to create this button that once pressed highlights the row and returns a data to the database which when loaded another time the datatable remains highlighted

  • kthorngrenkthorngren Posts: 20,583Questions: 26Answers: 4,823

    How will you know if the row is to be highlighted when loaded at another time? Are you using a field in your DB for this?

    Kevin

  • kthorngrenkthorngren Posts: 20,583Questions: 26Answers: 4,823
    edited March 2020

    If you don't need to persist the highlights in your DB you can use the Select Extension as I mentioned above. Here is an example:
    http://live.datatables.net/yocaheli/3/edit

    Note that I added the select extension JS and CSS. Changed the click event to select the row. Added rowId for the reload to re-select. Added a button to execute ajax.reload(). You will see the selected rows are reselected after ajax.reload().

    Kevin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    Yes, kevin i add to my database a field where i use for this (is an field "int")

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    Because i need to reload this table in another page for this i need than this button turn a data on database and when this table is load read the data on this row and evidence the row

  • kthorngrenkthorngren Posts: 20,583Questions: 26Answers: 4,823

    When you reload the table you can use either createdRow if the data is static or rowCallback if the data can change to highlight the row based on a value within the row. The docs have examples.

    Kevin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    How to do a button than send eg:"1" for pressed "0" not pressed

    Example :
    If button is "1" row evidence
    else
    not evidence row

  • kthorngrenkthorngren Posts: 20,583Questions: 26Answers: 4,823

    Sounds like you want a checkbox not a button. A checkbox is a toggle.

    Or you can change the toggle the value ("1" or "0") for the row each time the button is clicked.

    Kevin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    Yes kevin, sorry but im so bad

  • kthorngrenkthorngren Posts: 20,583Questions: 26Answers: 4,823

    If you are using Editor then this example will get you started:
    https://editor.datatables.net/examples/api/checkbox.html

    Kevin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    Too add background color when is checked? How to do.

  • kthorngrenkthorngren Posts: 20,583Questions: 26Answers: 4,823
    edited March 2020
  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    When i check the checkbox console turn me this error:

    This my code:

    https://damoratraffico.netsons.org/dioca/scrivania1.html

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    Solved, i dont declare in the label the field : active, now i need only to change the background color of row when the check box is checked

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    I including in this mode createdRow for background color of the row, but dont work..

    createdRow: function ( row, data, index ) {
    if ( data[11] == 1 ) {
    $('tr', row).eq(11).addClass('highlight')
    }
    },

    @kthorngren

  • kthorngrenkthorngren Posts: 20,583Questions: 26Answers: 4,823
    Answer ✓

    If you are using objects instead of arrays, ie, using columns.data, then you need to access the data using object notation instead of array notation. For example,

            "columns": [
                { "data": "name" },
                { "data": "position" },
                { "data": "office" },
                { "data": "extn" },
                { "data": "start_date" },
                { "data": "salary" }
            ],
            "createdRow": function ( row, data, index ) {
                if ( data.salary == 1 ) {
                    $('tr', row).eq(11).addClass('highlight')
                }
            }
    

    Kevin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    http://damoratraffico.netsons.org/forse1/scrivania1.html

    i leave my code for check it, but dont work this way..

  • kthorngrenkthorngren Posts: 20,583Questions: 26Answers: 4,823
    Answer ✓

    You are using createdRow which only runs when the row is first created. I suggested using rowCallback because it runs each time the row is redrawn on the page.

    Add your createdRow code to the rowCallback function you have.

    Kevin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    sorry kevin for the time you are wasting but you give me an example that translating I can't understand

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    i think the problem is too in.css

  • kthorngrenkthorngren Posts: 20,583Questions: 26Answers: 4,823
    Answer ✓

    If you inspect your table you will find that the row with the checkbox that is checked does not have the class highlight. You have the wrong selector. Instead of $('tr', row).eq(11).addClass('highlight') try $(row).addClass('highlight').

    Kevin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    Thanks Kevin works but the css dont work

    this is the result:

    but my css is:

    tr.highlight {
    background-color: #00FF00;
    }

  • kthorngrenkthorngren Posts: 20,583Questions: 26Answers: 4,823
    Answer ✓

    Use the browser's inspector tool to see what styles are being applied. Simply using tr.highlight probably won't work. Take a look at my first example to see what I used. You should be able to override the style you don't want by replicating the selector in your custom CSS.

    Kevin

This discussion has been closed.