Jquery Data table Destroying and Recreation

Today i have come up with the very useful technique for the people who are using jquery datatable.
In our case we have a html table ,we are going to change it as jquery datatable.Because jquery data table has lot of options like filtering,exporting and so on.This is the very daunting task most of the time .So here i have a method to do this operation.I checked this.It works fine.



Necessary scripts
 <script src="~/Datatable/script/jquery.dataTables.min.js"></script>
    <script src="~/Datatable/script/dataTables.buttons.min.js"></script>
    <script src="~/Datatable/script/jszip.min.js"></script>
    <script src="~/Datatable/script/pdfmake.min.js"></script>
    <script src="~/Datatable/script/vfs_fonts.js"></script>
    <script src="~/Datatable/script/buttons.html5.min.js"></script>
    <script src="~/Datatable/script/buttons.print.min.js"></script>
Necessary css
    <link href="~/Datatable/css/jquery.dataTables.min.css" rel="stylesheet" />

    <link href="~/Datatable/css/buttons.dataTables.min.css" rel="stylesheet" />
Jquery
   //---------datatable destroy------------------
                    if ($.fn.DataTable.isDataTable("#test")) {
                        $("#test").dataTable().fnDestroy();
                    }
              
   //------------------------------

 //----------------datatable recreation----------------------
                            $('#test').dataTable({
                                "displayLength":10,
                                  "dom": 'Bfrtip',
                                "columnDefs": [{
                                    "defaultContent": "-",
                                    "targets": "_all"
                                }],
                              buttons: [{
                                    extend: 'collection',
                                    text: 'Export',
                                    buttons: ['copy', 'excel','csv','pdf','print' ]
                                }]

                            });
 //-------------------


HTML

<table id ='test'> 
<thead>
<tr><th>Name</th><tr>
</thead>
<tbody>
<tr><td>ssn</td></tr>
<tr><td>test</td></tr>
<tr><td>Hello</td></tr>
</tbody>
</table>


I hope this will be helpful for the people who are using HTML table.



Comments

Post a Comment

Popular posts from this blog

Types of Architects

 1.Infrastructure Architect 2.Software Architect 3.Enterprise Architect Now we can see the above with some more detail. 1.Infrastructure Architect                  This architect is responsible for all non-software components such as Network,VM and so on. 2.Software Architect                This architect always looks at the  end result first, and only the starts looking at technologies, methodologies etc. They focus on fast, secure, reliable and easy to maintain software.
Read more

Basic measurements

In this lesson we are going to learn about some basic measurements.We must know about these measurements . Because these are essential in our regular day to day life.If we don't know this we are may cheated. 1 centimetre=10millimetre 1metre=100 centimetre 1kilometre=1000 metre Km->m(1000)->cm(100)->mm(10) 1 feet=30.48 centimetre 1 inch=2.54 centimetre
Read more

Search html table contents based on its td using Jquery

In this session we are going to see about searching the specific text in the html table.This is very useful most of the times rather bind data each time while searching.So here i have one textbox and one html table .In our case we have to display the input text from the table if exists.So here we go Jquery var findtext =$('#txtsearch').val(); if($.trim(findtext)!=' ') { $("#tbltext tbody tr").hide(); $('#tbltext tbody tr').each(function () { if ($.trim($(this).find('td').eq(1).text()) == $.trim(findtext)) { $(this).show(); } }); } else { $("#tbltext tbody tr").show(); } HTML <input type='text' id ='txtsearch'> </br> <table id='tbltext' > <thead> <tr> <th>No.</th><th>Name</th><th>Age</th> </tr> </thead> <tbody> <tr><td>1</td><td>Hello</td><td>10</td...
Read more