在Javascript

时间:2016-09-06 08:05:57

标签: javascript jquery csv papaparse

我有以下函数从远程csv文件中读取数据,并在将数据显示在数据表上之前对其进行一些处理。

function loadGrid()
{
        link='{{ url("thecsvfile") }}/'+$('#class-id').val();
        Papa.parse(link, {
        download: true,withCredentials: true,header:true,
        step: function(results, parser) {
         //.... process the data row by row
         cleanDataForGrid(results.data);
        },
        complete:function()
        {
           table =$('#the-grid').DataTable({
                  responsive: true,
                  destroy: true,
                 'bProcessing': true,
                  paging: false,
                  searching: false,
                  info:false,
                  scrollCollapse:true,
                  'columnDefs': [{
                                 'targets': 0,
                                 'searchable':false,
                                 'orderable':false,
                                 'width':'1%',
                                 'className': 'dt-body-center',
                                 'render': function (data, type, full, meta){
                                     return '<input type="checkbox" class="the_check">';
                                 },

                              }],

          });
           updateDownloaded();
        }
       });

}

它目前运行良好,问题是当csv文件有很多行时,加载需要很长时间,有时浏览器会挂起或粉碎。 有没有办法我们可以先获得行数,如果文件超过X行,则完全避免下载。 如果我能得到这样一个只返回行数的实现。

function getRows()
{
 var rowcount= Papa.parse(link, {download: false});
if(rowcount<50001) loadGrid();
}

是否可以实现这样的实施?

1 个答案:

答案 0 :(得分:1)

完全可以查询满足您需求的服务器端程序:返回CSV文件的行数。

示例:http://www.yoursite.com/handlers/csv/count?file=thecsvfile

您可以初始化javascript代码中返回值的视图。 使用php和zend框架,您可以使用viewmodel注入返回的值,并在视图中显示自己。

<script type="text/javascript">
<!--
var maxcsvfileSize = 50001;
var thecsvfileSize = <?php echo $this->thecsvfileSize; ?>;

function loadGrid(thecsvfileSize){ 
   // test the length of thecsvfile and do the job you need.
   if (thecsvfileSize < maxcsvfileSize) {
      // do the job
   }
}

//-->
</script>

<强> [编辑]

Papi documentation上查看一下,您将有权使用流来处理大文件:

Papa.parse("http://example.com/big.csv", {
    download: true,
    step: function(row) {
        console.log("Row:", row.data);
    },
    complete: function() {
        console.log("All done!");
    }
});

......相对容易完成,并且100%回答您的问题和需求。