如何在导出html表数据中包含行?

时间:2015-06-11 09:42:26

标签: jquery html

我使用以下插件在XLS和WORD中导出表数据。但是当我导出表数据时,它不包括表标题行。那么有没有办法在导出数据中包含字段。

<li>
<a href="#" onClick ="$('#datawtable').tableExport({type:'excel',escape:'false'});"> 
<img src='icons/xls.png' width='24px'> XLS
</a>
</li>
<li>
<a href="#" onClick ="$('#datawtable').tableExport({type:'doc',escape:'false'});"> 
<img src='icons/word.png' width='24px'> Word
</a>
</li>

<script type="text/javascript" src="js/tableExport.js"></script>
<script type="text/javascript" src="js/jquery.base64.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>

HTML表:

<table class="draw_table" id="datawtable" border="1" width="100%" cellspacing="0" cellpadding="0">
        <tr>
            <th>
                <a href="disdept.php?sort_element=dept_name&sort_type=<?php echo 
                    ($sort_element == "dept_name"  && $sort_type == "asc") ? "desc" : "asc"; ?>">Department
                    <?php if ($sort_element == "dept_name" ) {  if($sort_type == "desc" ) { ?>
                    <img class="sorting" src="images2/downarrow.png" alt="asc">
                    <?php } else { ?>
                    <img class="sorting" src="images2/uparrow.png" alt="desc">
                    <?php } } ?>
                </a>
            </th>
            <th >Description</th>
            <th >Options</th>
       </tr>

2 个答案:

答案 0 :(得分:2)

您的表格正确,但您遗漏了<thead><tbody>个标签。您的Html应如下所示,您应该在标题中添加标记,为其他行添加<tbody>标记。希望这能让你更清楚:

<table class="draw_table" id="datawtable" border="1" width="100%" cellspacing="0" cellpadding="0">
   <thead>  // Here we have added a <thead> tag (For headers)
        <tr>
            <th>
                <a href="disdept.php?sort_element=dept_name&sort_type=<?php echo 
                    ($sort_element == "dept_name"  && $sort_type == "asc") ? "desc" : "asc"; ?>">Department
                    <?php if ($sort_element == "dept_name" ) {  if($sort_type == "desc" ) { ?>
                    <img class="sorting" src="images2/downarrow.png" alt="asc">
                    <?php } else { ?>
                    <img class="sorting" src="images2/uparrow.png" alt="desc">
                    <?php } } ?>
                </a>
            </th>
            <th >Description</th>
            <th >Options</th>
       </tr>
</thead>
   <tbody> // Here we have added a <tbody> tag
     <tr>
      <td>
      </td>
      </tr>
   </tbody>
</table>

因为根据插件中的代码,其选择器会查找<thead>,然后<tr>,然后查找<th>标题和<tbody>,然后<tr>和然后是<td>数据行。

编辑1:

要忽略任何列,只需在ignoreColumn参数中传递其索引,如下所示:

$('#tableID').tableExport({
    type:'pdf',
    escape:'false',
    ignoreColumn: [2,3]  // here i have ignored 2nd and 3rd column
});

答案 1 :(得分:1)

在tableexport.js下面,line包含excel和msword中的表标题,所以tableexport.js没有错误

 $(el).find('thead').find('tr').each(function () {
                    excel += "<tr>";
                    $(this).find('th').each(function (index, data) {
                        if ($(this).css('display') != 'none') {
                            if (defaults.ignoreColumn.indexOf(index) == -1) {
                                excel += "<td>" + parseString($(this)) + "</td>";
                            }
                        }
                    });
                    excel += '</tr>';

                });

请确保您的HTML必须遵循以下HTML结构

<table id="tbData" class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="tbData_info">
                                    <thead>
                                        <tr>
                                            <th>  Column name 1</th>
                                            <th>Company Name 2
                                            </th>
                                            <th>
                                              Column name 3
                                            </th>
                                            <th>Column name 4</th>
                                            <th></th>
                                        </tr>
                                    </thead>

                                    <tbody >
                                    </tbody>
                                </table>