使用数据表上的导出按钮

时间:2019-06-24 20:37:09

标签: laravel datatables export-to-csv

我有一个数据表,该表具有使用Ajax进行服务器端处理的功能。我正在尝试向其中添加导出按钮,但是没有成功。我正在扩展已经包含所有文件的Laravel视图,但是无法显示按钮。

包含必要文件的母版页:

    <!-- Datatable -->
    <link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"> </script>
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"> </script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>

带有数据表的页面:

    <script type="text/javascript">
        $(document).ready(function(){
                $('#payments-table').DataTable({
                  dom: 'Bfrtip',
                  buttons: [
                      'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                processing: true,
                serverSide: true,
                ajax: '{{ route('get.payments') }}',
                order:[ [5,'desc'] ],
                columns: [

                    { data: 'id', name: 'id' },
                    { data: 'sub_id', name: 'sub_id' },
                    { data: 'company_name', name: 'company_name'},
                    { data: 'amount', name: 'amount'},
                    { data: 'status', name: 'status'},
                    { data: 'job_date', name: 'job_date'},
                    { data: 'amount_payed', name: 'amount_payed'},
                    { data: 'date_payed', name: 'date_payed'},
                    { data: 'trn_ss', name: 'trn_ss'},
                    { data: 'account_number', name: 'account_number'},
                    { data: 'bank_name', name: 'bank_name'},
                    { data: 'bank_branch', name: 'bank_branch'},
              ]
            });
  });

DataTable可以正确显示,但是按钮不显示,我也不知道该怎么办。

1 个答案:

答案 0 :(得分:0)

您是否尝试过手动插入按钮?

 CREATE OR REPLACE PROCEDURE add_docs

     IS

       dom_doc       DOM_DOCUMENT.DOMAIN_DOC%TYPE;
       type_doc_pk   TYPE_DOCS.TYPE_DOC_PK%TYPE;
       type_doc      TYPE_DOCS.TYPE_DOCUMENT%TYPE;
       user_code     TYPE_DOCS.USERCODE%TYPE;
       result_code   ECM_TIPO_DOCS.CODIGO_RESULTADO%TYPE;
       LS_LOCAL      INTEGER;
       l_id          INTEGER;

    cursor get_local
        is
        SELECT ls_local_pk FROM rt_local_ls

        rc_loc   c_loc%ROWTYPE;


cursor get_docs 
    is
    SELECT DOM_DOCUMENT.DOMAIN_DOC INTO dom_doc,
            TYPE_DOCS.TYPE_DOC_PK INTO type_doc_pk,
            TYPE_DOCS.TYPE_DOCUMENT INTO type_doc,
            TYPE_DOCS.USERCODE INTO user_code,
            TYPE_DOCS.CODE_RESULT INTO result_code
      FROM TYPE_DOCS 
        JOIN DOM_TDOC_SIS 
               ON TYPE_DOCS.TYPE_DOC_PK = DOM_TDOC_SIS.TYPE_DOC_PK
         JOIN DOM_DOCUMENT 
              ON DOM_TDOC_SIS.DOMAIN_DOC_PK = DOM_DOCUMENT.DOMAIN_DOC_PK
         WHERE DOM_DOCUMENT.DOMAIN_DOC_PK IN (2, 10) 
          AND NOT EXISTS
                 (
                  SELECT 1
                    FROM TP_DOC_MAP
                   WHERE  TP_DOC_MAP.LS_LOCAL_PK = LS_LOCAL        ----this is the variable that i have to iterate it's what i am getting from the other cursor
                          AND TP_DOC_MAP.LS_SYSTEM_PK = 3 
                         AND TP_DOC_MAP.ACTIVE = 1 
                         AND TP_DOC_MAP.CODE = TYPE_DOCS.TYPE_DOC_PK 
                );


BEGIN

    OPEN get_local;

    FETCH get_local INTO rc_loc

    IF get_local%FOUND
      THEN
           for md_local in get_local

           LOOP

           OPEN get_docs;

           FETCH get_docs INTO....


           ---now this is where i don't know how to do inside this loop i want to repeat the cursor get_docs  for each row in the cursor get_local
           --and then insert with the values fetched for each iteration


             INSERT INTO TP_DOC VALUES (  
              type_doc_pk,               
              type_doc,                     
              1,                    
              SYSDATE,             
              NULL)
              RETURNING id INTO l_id;


              INSERT INTO TP_DOC_MAP VALUES (
              l_id,
              LS_LOCAL,
              3,
              type_doc_pk,
              1,
              sysdate,
              NULL
              );


          END LOOP


      END IF;

END add_docs;

根据我对DataTables的经验,如果手动将按钮容器移动到其他位置,则不需要var table = $('#payments-table').DataTable({... $('#div_to_place_buttons_in').html(table.buttons().container());

对于您的评论,只需将DataTables实例化更改为保存在名为table的变量中,并删除dom: 'Bfrtip'部分,然后您就可以访问table变量中的DataTables实例。见下文:

dom

我不确定您的HTML是什么样的,但是您只需要一个div /类似容器即可放置按钮并引用它,而不是var table = $('#payments-table').DataTable({ buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ], processing: true, serverSide: true, ajax: '{{ route('get.payments') }}', order:[ [5,'desc'] ], columns: [ { data: 'id', name: 'id' }, { data: 'sub_id', name: 'sub_id' }, { data: 'company_name', name: 'company_name'}, { data: 'amount', name: 'amount'}, { data: 'status', name: 'status'}, { data: 'job_date', name: 'job_date'}, { data: 'amount_payed', name: 'amount_payed'}, { data: 'date_payed', name: 'date_payed'}, { data: 'trn_ss', name: 'trn_ss'}, { data: 'account_number', name: 'account_number'}, { data: 'bank_name', name: 'bank_name'}, { data: 'bank_branch', name: 'bank_branch'}, ] }); $('#div_to_place_buttons_in').html(table.buttons().container());