Press "Enter" to skip to content

Add Additional Custom Row to DataTable at First

We have already discussed how to implement DataTable with jquery, ajax and mySql. You can read here

If you want a custom row to datatable at first, then you need to write code after the datatable implementation.

<script>
var table = $('#my_data_table').DataTable( {           
   .........
   .........
});
ar row = $('<tr>')
        .append('<td></td>')
        .append('<td>All Distributors</td>')
        .append('<td></td>')
        .append('<td>0</td>')
table.row.add(row).draw(false);;
</script>

Where <td> attributes can be used as the function parameters

Example:

var item_id = 10;
var table = $('#distributor_table').DataTable( {             
        ajax: {
            url: "../requests/get_items.php",   
            data: {
                "item_id": item_id
            },  
            dataSrc : "data",              
        },        
       'columns': [
        {
                "data": "id",
                render: function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }   
        },
		         	{ data: 'Company' },
		         	{ data: 'Country' },
                     {   "mData": "ID",          
                     "mRender": function (data, type, row) {              
                    return "<input type='button' value='Select' onclick='saveSelectedItem("+ data + ",\""+ row.Company + "\")'></button>";
                    }
            }
		      	],
    } );
    var row = $('<tr>')
        .append('<td></td>')
        .append('<td>All Distributors</td>')
        .append('<td></td>')
        .append('<td>0</td>')
        table.row.add(row).draw(false);

Be First to Comment

Leave a Reply