How to display the icon in the table

izumov

My task is to develop a shopping cart page for the online store .To do this, I need to have icons with + and-in the last two columns of the table.When you click on that quantity of goods of the given string, or increased or decreasing respectively. Tell me how to organize the display of icons.

izumov

I was hoping that I would work data column rendering together with server processing and I got this code,
'''
$(document).ready(function()

{
$('#goods').DataTable( {
     "columnDefs": [
        {
            "render": function ( data, type, row ) {
                return data +' ('+ row[3]+')';
            },
            "targets": 0
        },
        { "visible": false,  "targets": [ 3 ] }
    ]
     "order": [[ 0, "desc" ]],
     select: true,
     scrollY: true,
     scrollX:true,
     "sRowSelect": "single",
    "processing": true,
    "bPaginate": true,
    "bSort": true,
    "serverSide": true,
    "autoWidth":true,
    // "ajax": "proc.php"
    "ajax": "server_processingclients011.php"
    //"ajax": "proba9.php"


} );
$('#clients tbody').on('dblclick', 'tr', function () {
    var table =$('#clients').DataTable();
    var data = table.row( this ).data();
    document.location.href="client.php?id="+data[0];

} );
 });"''

but the code but it does not work.
How do I change the code to make it work correctly?

kthorngren

I don't see anything that you are trying to do in the last two columns with + and -. Here are a couple of examples with buttons rendered into particular columns. Maybe one of the will help:

Using columns.defaultContent:
http://live.datatables.net/xijecupo/1/edit

Using columns.render:
http://live.datatables.net/qemodapi/1/edit

If these don't help then please build a simple test case so we can help you with your code.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

izumov

sorry, but I have never seen an example of a combination of server processing and rendering code. Is that possible?
my attempt to combine them, the code I gave in the first message was not successful

izumov

I tweaked the code and now I have displayed in column 9 text And I would like to see there the image of the icon . What is my mistake?
'''$('#goods').DataTable( {

     "order": [[ 0, "desc" ]],
     select: true,
     scrollY: true,
     scrollX:true,
     "sRowSelect": "single",
    "processing": true,
    "bPaginate": true,
    "bSort": true,
    "serverSide": true,
    "autoWidth":true,
    // "ajax": "proc.php"
    "ajax": "server_processingclients011.php",
    "columnDefs": [
        {

            "render": function ( data, type, row ) {
                return "< img src=images/sort_asc.png>"
               // return data +' ('+ row[3]+')';
            },
            "targets": 9
        },
        { "visible": true,  "targets": [ 3 ] }
    ]
    //"ajax": "proba9.php"


} );
$('#clients tbody').on('dblclick', 'tr', function () {
    var table =$('#clients').DataTable();
    var data = table.row( this ).data();
    document.location.href="client.php?id="+data[0];

} );
 });"'

kthorngren

What happens?

Looks like you have a syntax error with this: return "< img src=images/sort_asc.png>". You need quotes around images/sort_asc.png. Something like this: return '< img src="images/sort_asc.png">'.

Kevin

izumov

fixed code
'''
"columnDefs": [
{

            "render": function ( data, type, row ) {
                return '< img src="sort_asc.png">'
            },
            "targets": 9
        },
        { "visible": true,  "targets": [ 3 ] }
    ]

'''

taking into account your advice still displays the text and not the icon

kthorngren

If you place that code (< img src="sort_asc.png") directly into your HTML what happens? Is it the same result?

Try removing the space here < img to look like this <img.

Kevin

izumov

Kevin Thanks so much.Code works as it is necessary now displays the icon.

izumov

now I need to process the mouse click in the columns with icons as their meaning is different adding or reducing the product I need to know in the handler column in which there was a mouse click in the manual I could not find the desired section.I tried to link the event of clicking a particular column using code.

$('#goods tbody').on('click', 'tr td:eq(9)', function () {
        alert('col9')

    } );

I think there is a more elegant solution to the problem. Please suggest the solution.

izumov

I can't understand why in the code

$('#goods tbody').on('click', 'tr td:eq(9)', function () {
        var table =$('#goods').DataTable();
        var data = table.row( this ).data();
        alert('add good'+data[0] )

an error appears
goods101.js:41 Uncaught TypeError: Cannot read property '0' of undefined
Where is the error?

kthorngren

I don't think 'tr td:eq(9)' is working the way you expect. I believe it is a selector for only one td in the table, the 9th one. Looking at the jQuery :eq() Selector docs the example indicates the using td:eq(9) is not reset each row.

My suggestion is to use columns.className to assign a class to column 9 and use that as the selector, for example 'tr .col9'. Here is an updated example using your code:
http://live.datatables.net/telubuqe/1/edit

If you continue to have the Cannot read property '0' of undefined error we will need to see your page or a test case replicating the issue to help debug. You can update my example if you want.

Kevin

izumov

"columnDefs": [
            
                {className:"position",tagets:[9]},
                
                {  "render": function ( data, type, row ) {
                    return '<img src="add.png">'
                },
                
                tagets:9

            },
            { "visible": true,  "targets": [ 3 ] }

what's wrong with this code ? Icons are no longer displayed and still does not trigger the event of clicking the mouse on the column

kthorngren

Two problems; first is targets is misspelled, second you should combine all the options for target 9. Like this:

             "columnDefs": [
             
                {
                  className:"position",targets: [9],
                  "render": function ( data, type, row ) {
                    return '<img src="add.png">'
                  }
                },
                { 
                  "visible": true,  "targets": [ 3 ] 
                }                 
             ]

Kevin

izumov

Here is the entire code initiation

$(document).ready(function()

    {
    $('#goods').DataTable( {
         
         "order": [[ 0, "desc" ]],
         select: true,
         scrollY: true,
         scrollX:true,
         "sRowSelect": "single",
        "processing": true,
        "bPaginate": true,
        "bSort": true,
        "serverSide": true,
        "autoWidth":true,
        // "ajax": "proc.php"
        "ajax": "server_processingclients011.php",
        "columnDefs": [
            
         {
     className:"position",targets: [9],
     "render": function ( data, type, row ) {
       return '<img src="add.png">'
     }
   },
   {
     "visible": true,  "targets": [ 3 ]
   }   
        ]
        //"ajax": "proba9.php"
    

    } );
        $('#clients tbody').on('dblclick', 'tr', function () {
        var table =$('#clients').DataTable();
        var data = table.row( this ).data();
        document.location.href="client.php?id="+data[0];

    } );
    $('#goods tbody').on('click', 'tr.position', function () {
        var table =$('#goods').DataTable();
        var data = table.row( this ).data();
        alert('add good'+data[0] )
    //+data[0])

    } );
     });

Now icons are displayed and the event handler does not work. Is there a problem?

kthorngren

Looks like you might need a space here 'tr.position', like this 'tr .position'.

Kevin

izumov

With this amendment, the handler gets triggered but error remained.When trying to output data[0]

kthorngren

To help further we would need to actually see the problem. Please provide a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Your example code works in the example I posted. There is something specific to your environment or data.

You could use some console.log statements to troubleshoot. Try this:

    $('#goods tbody').on('click', 'tr .position', function () {
        console.log('this', this);
        var table =$('#goods').DataTable();
        var data = table.row( this ).data();
        console.log('data', data);
        alert('add good'+data[0] )
    //+data[0])
 
    } );

What do you get? You can do the same in my example to compare.

Kevin

izumov

my test case
http://montaj.vianor-konakovo.ru/goods9997.html
I debug pressing the plus icon.

izumov

I have in my console
Uncaught TypeError: Cannot read property '0' of undefined
at HTMLTableCellElement.<anonymous> (goods101.js:45)
at HTMLTableSectionElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLTableSectionElement.y.handle (jquery-3.3.1.min.js:2)

izumov

Can you help me?

kthorngren

I'm not sure why what you had didn't work but it looks like this should:

    $('#goods').off().on('click', 'tbody tr .position', function () {
        var table =$('#goods').DataTable();
        var row = this.closest('tr');
        var data = table.row( row ).data();
        console.log(data[0]);
    } );

Kevin

izumov

in this case the code is working properly thanks for the tip.Tell me how to display the icons in the previous column. My code has errors

"columnDefs": [
            
         {
     className:"position",targets: [9],
     "render": function ( data, type, row ) {
       return '<img src="add.png">'
     },
     {
     className:"position1",targets: [8],
     "render": function ( data, type, row ) {
       return '<img src="minus.png">'
     }
     
   },
   {
     "visible": true,  "targets": [ 3 ]
   }   
        ]

izumov

I can't understand why the icons in column 8 are not displayed.Can you tell me what's going on?

izumov

Where do I make a mistake?
how to change the code to display icons in both 8 and 9 column?

izumov

currently, icons are only displayed in column 9

izumov

more precisely, nothing is displayed because the debugger shows an error on the sign { when declaring a class in column 8

tangerine

Your first "render" function is lacking a closing bracket.

izumov

Made changes now the code looks like this

"columnDefs": [
            
         {
     className:"position",targets: [9],
     "render": function ( data, type, row ) {
         return '<img src="add.png">'}},
     
     { className:"position1",targets: [8],
     "render": function ( data, type, row ) {
       return '<img src="minus.png">'
     } 
     
   },
   {
     "visible": true,  "targets": [ 3 ]
   }   
        ]
        //"ajax": "proba9.php"
    

    } );
        $('#clients tbody').on('dblclick', 'tr', function () {
        var table =$('#clients').DataTable();
        var data = table.row( this ).data();
        document.location.href="client.php?id="+data[0];

    } );
$('#goods').off().on('click', 'tbody tr .position', function () {
    var table =$('#goods').DataTable();
    var row = this.closest('tr');
    var data = table.row( row ).data();
    console.log('data', data);
    alert('add good'+data[0] )
    //+data[0])

    } );
$('#goods').off().on('click', 'tbody tr .position1', function () {
    var table =$('#goods').DataTable();
    var row = this.closest('tr');
    var data = table.row( row ).data();
    console.log('data', data);
    alert('down good'+data[0] )
    //+data[0])

    } );    
     });

Now displays the icons in columns 8 and 9, but the handler event onclick in column 9 has stopped working handler for mouse click in column 8 is working

izumov

about any errors the debugger will not signal. Why doesn't the mouse click handler on column 9 work ? What's wrong ?

kthorngren

Doesn't look like you updated your test case. It could be the .off(). I had that for testing your page and should have removed it. Both should look like this `$('#goods').on('click'``. If this doesn't help then reverse the order of the click events to see if the problem changes columns.

Kevin