Extra function

michelek

Hello,

I'm working on this project http://accoglienza.eservers.it/join.html

How I can add two buttons to the edit interface? Button1 -> Completed and Button2 -> Not Completed

And I need this:
When I press on "Completed" button the correspondent record tr color become green and
when I press on "Not Completed" rebecome normal or transparent.

Any help?

allan

Hi,

It sounds like you want to implement a custom button. You could simply have them call the column().search() method, followed by draw() to search and then draw the table.

Edit - Sorry, I thought you wanted to filter the table using the buttons - it looks like you what to highlight certain rows. rows().every() would probably be the function to use in that case (to loop over all rows), along with row().node() to get the node so you can add / remove classes as needed.

Regards,
Allan

michelek

Hmmm, I don't know exactly how to implement this function. Maybe I can explain better what I need.

I have a field named STATUS in the datatables, when I set STATUS to 1, default is 0 the entire row color must become GREEN, how I can do it?

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "php2/join2.php",
        table: "#example",
        fields: [ {
                label: "STATUS:",
                name: "users.status",
                                type:  "select",
                options: [
                    { label: "COMPLETED", value: "1" },
                    { label: "NOT COMPLETED", value: "0" }
                ] }

I appreciate very much if you know help me

allan

I might have misunderstood. You want the row to change colour based on the data that the rows contains? In which case rowCallback is probably the best way to do it. You would just add or remove a class from the row based on the data.

Allan

michelek

Yeah! Can you give me an example of code, I don't know where and how to start?

allan

There is an example in the rowCallback documentation which shows how you can manipulate the DOM based on the data in the row. In this case you just want to use the jQuery $().addClass() and $().removeClass() methods to add or remove the class.

Allan

michelek

I will try

michelek

I have add this but I get undefined data so then I can't check if value is 1

http://accoglienza.eservers.it/join.html

    $('#example').DataTable( {
        dom: "Bfrtip", 
    lengthChange: false,
        ajax: {
            url: "php2/join2.php",
            type: 'POST'
        },
        columns: [    
      { data: "persone.notti_fuori" },
      { data: "persone.start_date" },
            { data: "persone.nome" },
            { data: "persone.cognome" },
            { data: "persone.data_di_nascita" },
      { data: "persone.nazionalita" },
      { data: "persone.sesso" },
      { data: "persone.residenza" },
            { data: "struttura.nome" },  
      { data: "persone.notti_assegnate", className: "center" }      
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ],
    "rowCallback": function( row, data, index ) {
    // Bold the grade for all 'A' grade browsers
alert (data[7]);
    }
    } 

michelek

I have found the solutions on google, from an old your answers

http://www.datatables.net/forums/discussion/6876/fnrowcallback-and-sajaxsource-giving-me-undefined-adata

"rowCallback": function( row, data, index ) {

  alert(data.persone.sesso);
  
}

michelek

Hi allan,
I have another problem on my project: http://accoglienza.eservers.it/join.html

Something wrong with mouse over color effect, it's not ok, how I can fix?

I need that when I move my mouse over the row it's changing back color to normal and when I click on it I need that entire row go to default blue color, but still remain green

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {

    ajax: "php2/join2.php",
        table: "#example",
        fields: [ {
                label: "N.F.: 1",
                name: "persone.notti_fuori"
            }, {
                label: "Nome: (<code>full</code>)",
                name: "persone.nome"
            }, {
                label: "Cognome:",
                name: "persone.cognome"
            }, {
                label: "Data di nascita:",
                name: "persone.data_di_nascita",
        type: "date"
            }, {
                label: "Nazionalit&agrave;:",
                name: "persone.nazionalita"
            } , {
                label: "Sesso:",
                name: "persone.sesso",
        type:  "select",
                options: [
                    { label: "M", value: "M" },
                    { label: "F", value: "F" }
                ]
            }, {
                label: "Residenza:",
                name: "persone.residenza"
            }, {
                label: "Note:",
                name: "persone.note"
            }, {
                label: "Struttura:",
                name: "persone.id_struttura",
                type: "select"
            }, {
                label: "Notti Assegnate:",
                name:  "persone.notti_assegnate",
                type:  "select",
                options: [
                    { label: "1", value: "1" },
                    { label: "2",           value: "2" },
                    { label: "3",           value: "3" },
                    { label: "4",           value: "4" },
                    { label: "5",           value: "5" },
          { label: "6",           value: "6" },
          { label: "7",           value: "7" },
          { label: "8",           value: "8" },
          { label: "9",           value: "9" },
          { label: "10",          value: "10" }
                ]
            }     
        ]
    } );

    editor.on( 'initEdit', function ( node, data, row, type ) {
        console.log( node, data, row, type );
    } );

    $('#example').DataTable( {
        dom: "Bfrtip", 
    lengthChange: false,
        ajax: {
            url: "php2/join2.php",
            type: 'POST'
        },
        columns: [    
      { data: "persone.notti_fuori" },
      { data: "persone.start_date" },
            { data: "persone.nome" },
            { data: "persone.cognome" },
            { data: "persone.data_di_nascita" },
      { data: "persone.nazionalita" },
      { data: "persone.sesso"},
      { data: "persone.residenza" },
            { data: "struttura.nome" },  
      { data: "persone.notti_assegnate", className: "center" }      
        ],
select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ],
    "rowCallback": function( row, data, index ) {
  if ( data.persone.sesso == "M" ) {
        $(row).addClass("test3");
  }  else if ( data.persone.sesso == "F" ) {
        $(row).removeClass("test3");
  } 
  
  
  
  }
  
} );
} );



    </script>
</head>

  <style type="text/css">
  
  .test3 { 
  background-color: #33CCCC !important; 
   }

    </style>

<body class="dt-example">
    <div class="container">
        <section>
            <h1>test</h1>

            <div class="info">
<div class="Buttons">
<input type="submit" id="Form_AskQuestion" name="Ask_Question" value="Home" class="Button Primary DiscussionButton" onclick="window.location.href='/join.html'" />
<input type="submit" id="Form_SaveDraft" name="Save_Draft" value="Struttura" class="Button Warning DraftButton" onclick="window.location.href='/struttura.html'" />
<input type="submit" id="Form_Preview" name="Preview" value="Utenti" class="Button Warning PreviewButton" />
</div>
</div>

            <table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
            <th>N.F.</th>
            <th>Data</th>
                        <th>Nome</th>
                        <th>Cognome</th>
                        <th>Data d.n.</th>
            <th>Nazionalit&agrave;</th>
                        <th>Sesso</th>  
            <th>Residenza</th>  
            <th>Struttura</th>   
            <th>Notti Assegnate</th>         
                    </tr>
                </thead>

                <tfoot>
                    <tr>
            <th>N.F.</th>
            <th>Data</th>
                        <th>Nome</th>
                        <th>Cognome</th>
                        <th>Data d.n.</th>
            <th>Nazionalit&agrave;</th>
                        <th>Sesso</th>  
            <th>Residenza</th>  
            <th>Struttura</th> 
            <th>Notti Assegnate</th>               
                    </tr>
                </tfoot>
            </table>

        

    
</body>
</html>

allan

You need to modify the CSS styling that you are using to make it more specific. If you right click in your browser and select "Inspect" element you will be able to see the styles that are being applied and what is overriding it.

Allan

michelek

My .addClass "test3" is overriding it! hmm

By the way i'm using the css you're using on your example

<title>Editor example - Join tables - working with multiple SQL tables</title>     
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.0.1/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="examples/resources/demo.css">

allan

On your page I did the following:

1. Right click on the NF cell that contains "dffdb"
2. In Chrome's inspector I can see that the background colour is coming from:

table.dataTable.display tbody tr.odd>.sorting_1,
table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 {
    background-color: #f1f1f1;
}

You simply need to override that class with your own. Or remove that if you don't what the sorting column to have a highlight.

Allan