pdf button

suser · August 2016

With the help of this https://datatables.net/extensions/buttons/examples/html5/simple.html i try to export pdf file now i want to ask
how button is generate i create the button or created by js files?

Tom (DataTables) · August 2016

The buttons are created automatically when you specify them inside the datatables initialisation.

You specify which buttons you would like here-

    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );

Then the buttons are added to the table.

Thanks

Tom

suser · August 2016

ok but i try to achieve this but their is no buttons

<head>
    <title>

    </title>

    

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>

    <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" rel="stylesheet" />




    <script type="text/javascript">
        $(document).ready(function () {
            $('#exdata').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5'
                ]
            });
        });

    </script>

   </head>

<body>


            <table id="exdata"  style="width:100%;">
            <tr>
                <td>Nmae1</td>
                <td>&Nmae3;</td>
                <td>&Nmae4;</td>
                <td>&Nmae5;</td>
                <td>&Nmae6;</td>
                <td>&Nmae7;</td>
                <td>&Nmae8;</td>
                <td>&Nmae9;</td>
                <td>&Nmae10;</td>
                </tr>
            <tr>
                <td>&asd;</td>
                <td>&nbasdsp;</td>
                <td>&nbasdsp;</td>
                </tr>
            <tr>
                <td>&nbasdsp;</td>
                <td>&nbsasdp;</td>
                <td>&nbsadp;</td>
                </tr>
                <tr>
                    <td>&nbasdsp;</td>
                    <td>&nbsasdp;</td>
                    <td>&nbsadp;</td>
                </tr>
                <tr>
                    <td>&nbasdsp;</td>
                    <td>&nbsasdp;</td>
                    <td>&nbsadp;</td>
                </tr>
                <tr>
                    <td>&nbasdsp;</td>
                    <td>&nbsasdp;</td>
                    <td>&nbsadp;</td>
                </tr>
                <tr>
                    <td>&nbasdsp;</td>
                    <td>&nbsasdp;</td>
                    <td>&nbsadp;</td>
                <tr>
                    <td>&nbasdsp;</td>
                    <td>&nbsasdp;</td>
                    <td>&nbsadp;</td>
                </tr>
                </tr>
            </table>
        </body>

allan · August 2016

DataTables requires that you have tbody and thead elements in your table. See the documentation for more information.

Also your HTML table isn't valid - your first row has more cells than any other.

Allan

suser · August 2016

ok now i have sveral other links for datepicker like and grid liknks like this

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
   
    <link href="Styles/chart_sheet.css" rel="stylesheet" type="text/css" />

    <link href="Styles/stylechart.css" rel="stylesheet" />
   
    <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" rel="stylesheet" />



<%--for tabledata--%>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
<script src="Scripts/gridviewScroll.js" type="text/javascript"></script>
<script src="Scripts/gridviewScroll.min.js" type="text/javascript"></script>
<link href="Styles/gridviewScroll.css" rel="stylesheet" type="text/css" />





<%-- for popup --%>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" />


   

<%-- for datepicker --%>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
 <link id="themecss" rel="stylesheet" type="text/css" href="https://www.shieldui.com/shared/components/latest/css/light/all.min.css" />
<script type="text/javascript" src="https://www.shieldui.com/shared/components/latest/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
   
 <script type="text/javascript">
     $(document).ready(function () {
         $('#tabledata').DataTable({
             dom: 'Bfrtip',
             buttons: [
                 'copyHtml5',
                 'excelHtml5',
                 'csvHtml5',
                 'pdfHtml5'
             ]
         });
     });

    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<span>
                 
<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

     <ajax:ListSearchExtender  ID="lseregiondrop" runat="server" TargetControlID="regiondrop"
      PromptPosition="Top" QueryPattern="Contains" PromptText="Type to Search">
    </ajax:ListSearchExtender>

     <asp:Label ID="Label3" runat="server" Text="Select Region"></asp:Label>
    <asp:DropDownList ID="regiondrop" runat="server" AutoPostBack="True" 
    onselectedindexchanged="regiondrop_SelectedIndexChanged">
    </asp:DropDownList>  

    <asp:RequiredFieldValidator controltovalidate="regiondrop" ID="RequiredFieldValidator1" runat="server" ErrorMessage="Select Region">
    </asp:RequiredFieldValidator>

    </span>

      <span>
    <asp:Label ID="Label1" runat="server" Text="From Date"></asp:Label>
  
    <input  ID="fromdate"   value="dd/mm/yyyy" runat="server" clientidmode="static" />

    <asp:RequiredFieldValidator controltovalidate="fromdate" ID="RequiredFieldValidator2" runat="server" ErrorMessage="Select date">
    </asp:RequiredFieldValidator></span>
     <span>
     <asp:Label ID="Label2" runat="server" Text="To Date"></asp:Label>

     <input  ID="todate"   value="dd/mm/yyyy" runat="server" clientidmode="static" />
   

    <asp:RequiredFieldValidator controltovalidate="todate" ID="RequiredFieldValidator3" runat="server" ErrorMessage="Select date">
    </asp:RequiredFieldValidator></span>
         </div>
  <br /><br />


  <table id="tabledata"   cellspacing="0"  class="inner_table">
    

 <thead>
                    <tr>
                        <td>Nmae1</td>
                        <td>&Nmae3;</td>
                        <td>&Nmae4;</td>
                    </tr>
                </thead>
                <tbody>


                    <tr>
                        <td>&asd;</td>
                        <td>&nbasdsp;</td>
                        <td>&nbasdsp;</td>
                    </tr>
                    <tr>
                        <td>&nbasdsp;</td>
                        <td>&nbsasdp;</td>
                        <td>&nbsadp;</td>
                    </tr>
                    <tr>
                        <td>&nbasdsp;</td>
                        <td>&nbsasdp;</td>
                        <td>&nbsadp;</td>
                    </tr>
                </tbody>
   </table>
 
 
   <div id="container">
  </div>

   <div id="cont">
  </div>
  
    </div
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script> 
</asp:Content>

when i build this then this show conflicts of js files and show that error

Uncaught TypeError: $(...).shieldDatePicker is not a function

suser · August 2016

@allan

allan · August 2016

Uncaught TypeError: $(...).shieldDatePicker is not a function

That isn't a DataTable issue. However, the issue is most likely that you are loading jQuery multiple times for some reason. I see 5 different versions in the above code.

Allan

suser · August 2016

yes so how i edit this ? and which one i remove this

suser · August 2016

hey now i try this and this show error like this

jquery.dataTables.min.js:65 Uncaught TypeError: Cannot read property 'aDataSort' of undefined

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
   
    <link href="Styles/chart_sheet.css" rel="stylesheet" type="text/css" />

    <link href="Styles/stylechart.css" rel="stylesheet" />
   

    <!--for date--%>-->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>

    <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" rel="stylesheet" />

   

     <script type="text/javascript">

         $(function () {
             $('#fromdate').datepicker();
         });
      </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#tabledata').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5'
                ]
            });
        });

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <asp:Label ID="Label1" runat="server" Text="From Date"></asp:Label>
  
    <input  ID="fromdate"   value="dd/mm/yyyy" runat="server" clientidmode="static" />

     <table id="tabledata"   cellspacing="0"  class="inner_table">
    
   </table>
   <div id="container">
  </div>

   <div id="cont">
  </div>

    <div id="sumdata">
  </div>
 
    </div>

</asp:Content>

suser · August 2016

@allan

allan · August 2016

There is no data in the table. No columns, no nothing. If you want to define columns use columns, or just put them in your HTML.

Allan

suser · August 2016

now the problem is when i hard code table liket his

<table id="tabledata"  style="width:100%;">
                <thead>
                    <tr>
                        <td>Nmae1</td>
                        <td>&Nmae3;</td>
                        <td>&Nmae4;</td>
 
                    </tr>
                </thead>
            
            <tr>
                <td>&asd;</td>
                <td>&nbasdsp;</td>
                <td>&nbasdsp;</td>
                </tr>
            <tr>
                <td>&nbasdsp;</td>
                <td>&nbsasdp;</td>
                <td>&nbsadp;</td>
                </tr>
                <tr>
                    <td>&nbasdsp;</td>
                    <td>&nbsasdp;</td>
                    <td>&nbsadp;</td>
                </tr>
                 
            </table>

then this perfectly works but when i just use this

Plain text


<table id="tabledata"   cellspacing="0"  class="inner_table">
     
   </table>

but when i populate table through jquery and web static method like this

success: function (result) {
var final = JSON.parse(result.d).response;
   console.log(JSON.parse(result.d).response);
   $("#tabledata").empty();
 
   if (final.length > 0) {
       $("#tabledata").append(
"<thead><tr><th>ID</th><th>Owner</th><th>RegNo</th></tr></thead>");
 
       for (var i = 0; i < final.length; i++) {
 
           if (final[i] !== null) {
               $("#tabledata").append("<tbody><tr><td>" +
                                   final[i][0] + "</td> <td>" +
                                   final[i][1] + "</td> <td>" +
                                   final[i][2] + "</td></tr></tbody>");
 
           }
       }
 
       $("#pdf").show();
       $("#excel").show();
   }

then buttons not visible when i use this

how to solve
@allan

allan · August 2016

You have to initialise the DataTable after you have inserted it into the document. Also note that you are adding a tbody for every row, which is not something DataTables supports. It only allows one tbody at the moment.

Allan

pdf button

pdf button

Answers

Howdy, Stranger!

Categories

DataTables

pdf button

pdf button

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables