K
K
karasique2018-09-21 15:37:19
PHP
karasique, 2018-09-21 15:37:19

How to make a column with actions for dataTables?

There is such a table:

<table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
       <thead>
          <tr>
             <th>Название карточки</th>
             <th>Имя</th>
             <th>Номер</th>
             <th class="disabled-sorting sorting"> Действия </th>
          </tr>
       </thead>
       <tbody>
       </tbody>
    </table>

js:
<script type="text/javascript" language="javascript" >
       $(document).ready(function() {
       	var dataTable = $('#datatables').DataTable( {
       		"processing": true,
       		"serverSide": true,
       		"ajax":{
       			url :"getData.php", // json datasource
       			type: "post",  // method  , by default get
       			error: function(){  // error handling
       				$(".datatables-error").html("");
       				$("#datatables").append('<tbody class="error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
       				$("#datatables_processing").css("display","none");
       				
       			}
       		}
       	} );
       } );
    </script>

And here's the php handler: pastebin
How to display such code in the "actions" column?
<td class="td-actions text-right">
    <a target="_blank" href="/clients/i?getInfo=".$row['id']." rel="tooltip" title="Просмотр/изменение" class="btn btn-info btn-simple btn-xs">
    	<i class="ti-user"></i>
    </a>
    <a href="#" rel="tooltip" title="Удалить" class="btn btn-danger btn-simple btn-xs">
    	<i class="ti-close"></i>
    </a>
    </td>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Stalker_RED, 2018-09-21
@karasique

More or less like this:

columnDefs: [
                {
                    "render": generateUserProfileLink,
                    "targets": 1,
                },
                {
                    "render": generateBalanceLink,
                    "targets": 5,
                },
                { "visible": false,
                    "targets": [ 3 ]
                }
            ],

Links will be inserted into the first and fifth columns, the third column will be hidden.
The link generation function itself:
function generateBalanceLink(cellValue, type, row) {
            return '<a href="#" style="border-bottom: dashed 1px gray;" data-toggle="modal" data-target="#modal-balance" id="balanceBtn_' + row[0] + '" data-uid="' + row[0] + '" data-username="' + row[1] + '">' + (parseFloat(cellValue)||0) + '</a>';
        }

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question