pdf button

pdf button

susersuser Posts: 68Questions: 18Answers: 0

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?

Answers

  • Tom (DataTables)Tom (DataTables) Posts: 139Questions: 0Answers: 26

    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

  • susersuser Posts: 68Questions: 18Answers: 0
    edited 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>
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • susersuser Posts: 68Questions: 18Answers: 0
    edited 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

  • susersuser Posts: 68Questions: 18Answers: 0
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • susersuser Posts: 68Questions: 18Answers: 0

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

  • susersuser Posts: 68Questions: 18Answers: 0
    edited 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>
    
  • susersuser Posts: 68Questions: 18Answers: 0
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • susersuser Posts: 68Questions: 18Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.