Extra function

michelek · November 2015

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 · November 2015

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 · November 2015

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 · November 2015

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 · November 2015

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

allan · November 2015

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 · November 2015

I will try

michelek · November 2015

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 · November 2015

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 · November 2015

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 · November 2015

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 · November 2015

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 · November 2015

On your page I did the following:

Right click on the NF cell that contains "dffdb"
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

Extra function

Extra function

Answers

Howdy, Stranger!

Categories

DataTables

Extra function

Extra function

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables