button function

antoniocib

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'}

colin

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

antoniocib

http://live.datatables.net/zunogaga/1/edit this is my table @colin

colin

That doesn't run, I'm afraid.

Colin

antoniocib

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

kthorngren

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

antoniocib

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

kthorngren

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

antoniocib

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

kthorngren

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

kthorngren

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

antoniocib

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

antoniocib

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

kthorngren

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

antoniocib

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

kthorngren

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

antoniocib

Yes kevin, sorry but im so bad

kthorngren

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

Kevin

antoniocib

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

kthorngren

Use the rowCallback function. See this example:
https://datatables.net/examples/advanced_init/row_callback.html

Kevin

antoniocib

When i check the checkbox console turn me this error:

This my code:

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

antoniocib

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

antoniocib

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

kthorngren

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

antoniocib

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

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

kthorngren

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

antoniocib

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

antoniocib

i think the problem is too in.css

kthorngren

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

antoniocib

Thanks Kevin works but the css dont work

this is the result:

but my css is:

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

kthorngren

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