ritacse
12/6/2017 - 8:02 AM

JQuery DataTable

var urlLink = 'ApprovalSystem/htmlReport/' + ReportName + '?clientAgent=Web&userId=' + 0 + '&docBaseId=' + DocBaseID + '&docCode=' + docCode[i] + '&docVersion=' + -1;
 html += '<a href="' + urlLink + '" target="_blank">' + docCode[i] + '</a> ,';
 
 $('#lblCSTNo').html(html);
        
"fnInitComplete": function (oSettings, json) {
  $('#tblAppraisalEmployeeList_wrapper .dataTables_filter input').addClass("input-small"); // modify table search input
},

"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {   
  /// Adding Dynamic css
    if (aData.columnName == Value)
        $('td', nRow).css('background-color', 'rgb(133, 224, 133)');
    else {
         $('td', nRow).css('text-align', 'right');
         $('td:eq(2)', nRow).css("background-color", "pink"); //for specific column
    }
},
        
"fnDrawCallback": function (settings) {
  $('#tblOrderList tbody tr td ._rowCopy').unbind("click");
  $("#tblOrderList tbody tr td ._rowCopy").click(function () {
    
    e.stopImmediatePropagation(); //stop fnDrawCallback function from executing multiple times
      var position = oTable.fnGetPosition($(this).parent().parent()[0]);
      var Obj = oTable.fnGetData(position);
      $('#spnRowTotal' + Obj.buyer_Order_Code).text(Obj.InvoiceQty * Obj.UnitPrice);

/// add tooltip in dynamic dropdown on selected.
 var newTitle = $('#ddlKPIName_' + oKPI.count + ' option:selected').text();
  $('#ddlKPIName_' + oKPI.count).prop('title', 'your new title');
  });
            //=========
$('#tblOrderList tbody _total').unbind("blur");
$('#tblOrderList tbody').on('blur', '._total', function (e) {
     var rowCount = $('#tblOrderList tr').length;
    CalculateTotal();
    
    //stop fnDrawCallback function from executing multiple times
     paginationControl($('#tblOrderList'));
   
});
        { "bSearchable": false, "bSortable": false, "aTargets": [2] }
        { "bVisible": false, "bSortable": false, "aTargets": [1,4,6] },
        
        "scrollX": true,  // scroll horizontally
        
        "sScrollY": 300,    // Scroll vertically   
        "sScrollCollapse": true, // use with scrollY
        
        "order": [[1, "desc"],[2, "asc"]],
        "bInfo": false,
        "bFilter": false,
        "bPaginate": false,
        "bAutoWidth": false,
        "bDestroy": true
        
         
 {
     "render": function (data, type, row) {
         return '<input type="text" id="txtInvoicePrice' + row.buyer_Code + '" onblur= "CalculateTotal(\'' + rowID + '\',' + BalanceQty + ')" value="' + data + '" class="txtDesimal _total" style="width:100%"/>';
     },
     "targets": [11]
 },
  {
    "render": function (data, type, row) {

        data = parseFloat(row.invoice_Qty) * parseFloat(row.invoice_Unit_Price);
        return '<span id="spnRowTotal' + row.buyer_Code + '">' + (data.toFixed(2)) + '</span>';
    },
    "targets": [12]
},
var position = oTable.fnGetPosition($(this).parent().parent()[0]);
var Obj = oTable.fnGetData(position);

var oTable = $('#tblEmployee').dataTable();
    
    oTable.fnAddData(Obj); //Add any obj
    
 self.EligibleEmpList = _.reject(self.EligibleEmpList, function (num) { return num.EmpId == data.EmpId; });
   oTable.fnDeleteRow(position);  //Delete
//datatable jquery - table header width not aligned with body width

//Solution Link: https://stackoverflow.com/questions/17237812/datatable-jquery-table-header-width-not-aligned-with-body-width

.dataTables_scroll
{
    overflow:auto;
}

//and adding this JS after your dataTable initialization:

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

//Don't use sScrollX or sScrollY, remove them and add a div wrapper yourself which does the same thing.