DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

import csv into datatable

import csv into datatable

sonicbugsonicbug Posts: 26Questions: 0Answers: 0
edited March 2010 in General
Hi,

I have been able to get this plug in to work great with static text (HTML), but I am looking for more of a dynamic solution. I would like to know if it is possible to import a csv file into datatables or if there exists a plugin that already does this? I am sure someone has already faced this issue and solved it. Any suggestions or feedback is greatly appreciated.

Thanks,

Replies

  • ash-iitash-iit Posts: 4Questions: 0Answers: 0
    Was this ever answered? I have the same issue, client specifically wants it to read from a csv file.
  • allanallan Posts: 63,451Questions: 1Answers: 10,465 Site admin
    If you want it entirely client-side, then you'll need to use a little bit of flash to upload the file, and then pass it over to Javascript for use in DataTables. If you are willing to use a bit of server-side work, upload the file to the server, have it parse it and then send back the data to DataTables. There isn't specifically a plug-in for this at the moment, but it should be quite readily accomplishable.

    Allan
  • ash-iitash-iit Posts: 4Questions: 0Answers: 0
    I have the .csv on the server, I was just wondering if there was a couple of lines of javascript out there that will grab that data and throw it in the table. Then every time that data needs to be changed, all the client has to do is upload and replace the csv file. Seems like such a simple thing but I can't find anyone thats ever actually done it :(
  • allanallan Posts: 63,451Questions: 1Answers: 10,465 Site admin
    If you have a PHP server, then fgetcsv is going to be far the fastest way of doing it: http://php.net/manual/en/function.fgetcsv.php - then just output it as an HTML table. Of you want to do it in Javascript, there are a number of CSV parsers knocking about the web: http://purbayubudi.wordpress.com/2008/11/09/csv-parser-using-javascript/ for example.

    Allan
  • sonicbugsonicbug Posts: 26Questions: 0Answers: 0
    Hi ash-iit:

    There is a jquery plugin called csv2table that plays nice with the datatables plugin. If you want to return the csv data as an array of arrays, use the code snippet below.

    [code]
    /* Usage:
    * jQuery.csv()(csvtext) returns an array of arrays representing the CSV text.
    * jQuery.csv("\t")(tsvtext) uses Tab as a delimiter (comma is the default)
    * jQuery.csv("\t", "'")(tsvtext) uses a single quote as the quote character instead of double quotes
    * jQuery.csv("\t", "'\"")(tsvtext) uses single & double quotes as the quote character
    */
    ;
    jQuery.extend({
    csv: function(delim, quote, linedelim) {
    delim = typeof delim == "string" ? new RegExp("[" + (delim || ",") + "]") : typeof delim == "undefined" ? "," : delim;
    quote = typeof quote == "string" ? new RegExp("^[" + (quote || '"') + "]") : typeof quote == "undefined" ? '"' : quote;
    lined = typeof lined == "string" ? new RegExp("[" + (lined || "\r\n") + "]+") : typeof lined == "undefined" ? "\r\n" : lined;

    function splitline(v) {
    // Split the line using the delimitor
    var arr = v.split(delim),
    out = [], q;
    for (var i = 0, l = arr.length; i < l; i++) {
    if (q = arr[i].match(quote)) {
    for (j = i; j < l; j++) {
    if (arr[j].charAt(arr[j].length - 1) == q[0]) { break; }
    }
    var s = arr.slice(i, j + 1).join(delim);
    out.push(s.substr(1, s.length - 2));
    i = j;
    }
    else { out.push(arr[i]); }
    }

    return out;
    }

    return function(text) {
    var lines = text.split(lined);
    for (var i = 1, l = lines.length; i < l; i++) {
    lines[i] = splitline(lines[i]);
    }
    return lines;
    };
    }
    });

    [/code]

    I worked out my issue with the above code. I hope this helps :)
  • allanallan Posts: 63,451Questions: 1Answers: 10,465 Site admin
    Very cool! Nice one sonicbug - thanks for that :-)

    Allan
  • ash-iitash-iit Posts: 4Questions: 0Answers: 0
    Thank you allan and sonicbug, both your posts were very helpful :) i found csv2table but didn't know how to bridge the gap between the two, i think this is exactly the code i need! Thanks again!
  • ash-iitash-iit Posts: 4Questions: 0Answers: 0
    Stuck again, can't get csv2table to work in Google Chrome, it works on all other browsers though and it works in Chrome on that Japanese sample link that you can follow from the Jquery site. Totally baffled :( Heres my code for the entire test page:

    [code]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Untitled Document
    <!--[if IE]>

    <![endif]-->




    jQuery(function($){
    $(".btn1").attr("disabled","");
    });


    .jQchart-labelY-canvasMyID{
    font-size : 12px;
    }

    /* label Data */
    .jQchart-labelData-canvasMyID{
    font-size : 10px;
    }

    .jQchart-labelYunit{
    width : 100px;
    }











    $(function(){
    $('#view1').csv2table('csv/tours.csv');
    });





    [/code]

    Oh and excuse me for the extremely noob question, but where exactly would you put that snippet of code that sonicbug posted? I'm a webdesigner, not a developer, so my knowledge is rather limited when it comes to coding.

    Thanks
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.