How to customize Data Tables

-
Customizing Data Tables - 

In the below scenario i have changed data table button names, customize paginate, customize search, customize infoFiltered etc. You just need to get your data from a data source and apply the below code.

Code - 

$("#tbl").DataTable({
        dom: 'Bfrtip',
        buttons: [{
          extend: 'pdf',
          text: 'Pdf'
        }, {
          extend: 'excel',
          text: 'Excel'
        }],
        language: {
          paginate: {
            next: '→', // or '→'
            previous: '←' // or '←' 
          },
          search: '🔎',
          info: "Resultados _START_ a _END_ de _TOTAL_ entradas",
          infoEmpty: "Resultados 0 a 0 de 0 entries",
          emptyTable: "No hay datos disponibles en la tabla",
          infoFiltered: "(filtrado de _MAX_ entradas totales)",
          zeroRecords: "No se encontraron registros coincidentes"
        }
 }); 





Comments

Post a Comment

Popular posts from this blog

Customizing SharePoint list and implementing Quick search using jQuery

-
Image
How to Customize SharePoint list and implementing Quick search using jQuery 1. Create a SharePoint list and create a view for it. 2. Now choose the created view and go to modify view, under Style choose Shaded as shown below.  3. Edit the list and add script editor web part to it and paste the below code. Code:- <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"></script> <style> .ms-addnew {   display: none; } input[type=button] {     background-color: #4CAF50;     border: none;     color: white;     padding: 16px 32px;     text-decoration: none;     margin: 4px 2px;     cursor: pointer; } </style> <script type="text/javascript"> $(document).ready(function(){   $("input.search").change(function() { debugger;      var txt = $("input....
Read more

Enable and Disable Client side People Picker using jQuery

-
Image
How to enable and disable Client side People Picker using jQuery By using below methods you can easily enable or disable Client side People Picker:- function disablePP() { $(".sp-peoplepicker-delImage").find("span").css("display","none"); $("input.sp-peoplepicker-editorInput[title='Enter names or email addresses...']").prop('disabled', true); $("div.sp-peoplepicker-topLevel[title='Enter names or email addresses...']").addClass("sp-peoplepicker-topLevelDisabled"); } function enablePP() { $("div.sp-peoplepicker-topLevel[title='Enter names or email addresses...']").removeClass("sp-peoplepicker-topLevelDisabled"); $("input.sp-peoplepicker-editorInput[title='Enter names or email addresses...']").prop('disabled', false); $(".sp-peoplepicker-delImage").find("span").removeAttr('style'); } ...
Read more

Populate dropdown using jquery ajax in SharePoint

-
Image
How to Populate dropdown using jquery ajax in SharePoint Step 1: Create a page and add Script Editor Web Part to it. Step 2: Paste the below code to Script Editor Web Part. Code:               <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"></script> <script type="text/javascript"> var option; var Banks;  $(document).ready(function () {      Banks = $("#ddlbanks");  // html control      option = $("<option/>").attr("value",0).text("-Select-");      Banks.append(option);      populateBanks();   }); function populateBanks(){      $.ajax({ url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Banks')/Items", type: 'GET', dataType: 'json', async: false, headers: {     "accept": "application/json;odata=verbose;charset=ut...
Read more