Viewing 1 post (of 1 total)
  • Author
    Posts
  • #1086

    luc
    Keymaster

    DataTables can be filled statically with static values in either HTML or JS file, or dynamically via web service.

    In all cases, you’ll need to declare the HTML table :

    <table id="IDtable" data-page-length='5' data-paging='true' data-searching='true' data-ordering='true' data-info='true' data-order='[[ 0, "asc" ]]'>
      <thead>
        <tr>
          <th>Uname</th>
          <th>Upassword</th>
          <th>Urole</th>
          <th>Uid</th>
        </tr>
      </thead>
    </table>

    You can use any combination of following attributes for table description :

      data-page-length='5'        : number of lines per page
      data-paging='true'          : display pagination select tools, if false display the whole table
      data-searching='true'       : display search box on top right which allows search in all fields
      data-ordering='true'        : enable order ascending/descending. Default sort order is string, specify type "string"/"num"/"date-fr" on each column if needed, check below
      data-info='true'            : display pagination informations on bottom left
      data-order='[[ 0, "asc" ]]  : if data-ordering = true, you can set columns order, first column is 0, many colmuns can be set in the array
      data-selectcolumns='false'  : display all available fields on middle top which then can be choosen or not for display 
      data-selectauto='false'     : display a select list on top of each columns containing the different values whch can be selected as search

    To enable a input field on top of a column to enable individual column search, you can set a data-filter tag. You cannot use data-filter on th tag as the same time than data-selectcolumns on table tag.

     <th data-filter='true'>Uname</th>

    Static values in HTML file :

    <tbody>
      <tr><td>Luke</td><td>password1</td><td>Admin</td><td>1</td></tr>
      <tr><td>Suwan</td><td>password2</td><td>User</td><td>2</td></tr>
      <tr><td>Brice</td><td>password3</td><td>User</td><td>4</td></tr>
      <tr><td>Kevin</td><td>password4</td><td>Enduser</td><td>3</td></tr>
      <tr><td>Brigitte</td><td>password5</td><td>Client</td><td>7</td></tr>
      <tr><td>Bertrand</td><td>password6</td><td>Client</td><td>5</td></tr>
      <tr><td>Daniel</td><td>password8</td><td>Enduser</td><td>6</td></tr>
      <tr><td>John</td><td>password7</td><td>Admin</td><td>8</td></tr>
    </tbody>

    Static values in JS file :

    // Columns headers settings, refer to datatables.net web site
    var columns = [
      {
        width: "30%", data: "user", searchable: true, visible: true, orderable: true
      },
      {
        width: "30%", data: "password", searchable: false, visible: false, orderable: false
      },
      {
        width: "30%", data: "role", searchable: true, visible: true, orderable: true,
        render: function(data, type, full, meta) // 'Admin' role in red
        {
          if (data == 'Admin')
            return '<span style="color:red">' + data + '</span>';
          else
            return data;
        }
      },
      {
        width: "10%", data: "id", searchable: false, visible: false, orderable: true,
        type: "num" // can be "data-fr" or "string" (default), refer to datatables.net for complete description
      }
    ];
    // Setting data
    var users = [
      {"id":"1","user":"Luke","password":"password1","role":"Admin"},
      {"id":"2","user":"Suwan","password":"password2","role":"User"},
      {"id":"3","user":"Kevin","password":"password4","role":"Enduser"},
      {"id":"4","user":"Brice","password":"password3","role":"User"},
      {"id":"5","user":"Bertrand","password":"password6","role":"Client"},
      {"id":"6","user":"Daniel","password":"password8","role":"Enduser"},
      {"id":"7","user":"Brigitte","password":"password5","role":"Client"},
      {"id":"8","user":"John","password":"password7","role":"Admin"}
    ];
    // Fill up datatable, true to enable row select (multiple rows with CTRL key)
    // Note that if you have set rows in HTML file, they'll be ignored and overwritten by CYDataTable call
    var table = CYDataTable("IDtable", columns, users, true)

    Dynamic values loaded with web service :

    // Columns headers settings same as above
    // Web service call
    var webservice = "http://example.com/mywebservice.php?r=XXX&x=999&etc...";
    CYExec(webservice, function(ret, status)
      {
        if (ret < 0)
          var users = new Object();
        else
          var users = JSON.parse(ret);
        var table = CYDataTable("IDtable", columns, users, true);
      }
    ); 
    

    You can easily set direct editing with a double click in a table cell, just add the following JS line :

    CYDataTableEditCell(table, function (newvalue, oldvalue, colonne, row, callback)
      {
        console.log("Cell edited new="+newvalue+",old="+oldvalue+",col="+colonne+",row=" + JSON.stringify(row));
        callback (newvalue); // to display to updated cell
      });

    Or use a single click detection of a table row, just add the following JS line (a that case double click cannot be triggered) :

    CYDataTableSelectLine(table, function (row)
      {
         console.log(JSON.stringify(row));
      });

    You can also specify input format in th tags to enable user input controls, for example :

    <th data-maxlength='30' data-mask="[a-zA-Z]{1}[._@a-zA-Z0-9]*">

    All these tags can be used in a th tag, they will be used for each corresponding td data :

    readonly         : same as input attribute
    data-maxlength   : same as maxlength input attribute
    data-mask        : same as input 
    data-format      : same as input
    data-type        : same as input
    datepicker       : same as input
    • This topic was modified 9 months, 2 weeks ago by  luc.
    • This topic was modified 9 months, 2 weeks ago by  luc.
    • This topic was modified 9 months, 2 weeks ago by  luc.
    • This topic was modified 9 months, 2 weeks ago by  luc.
    • This topic was modified 9 months, 2 weeks ago by  luc.
    • This topic was modified 9 months, 2 weeks ago by  luc.
    • This topic was modified 9 months, 2 weeks ago by  luc.
    • This topic was modified 9 months, 2 weeks ago by  luc.
    • This topic was modified 9 months, 2 weeks ago by  luc.
    • This topic was modified 9 months, 2 weeks ago by  luc.
    • This topic was modified 9 months, 2 weeks ago by  luc.
    • This topic was modified 2 months ago by  luc.
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.