Sciter : GUI Application with Golang using HTML/CSS

Image
Update : 25-12-2019

This is the words from Sciter's Web site,


Sciter brings a stack of web technologies to desktop UI development. Web designers and developers can reuse their experience and expertise in creating modern looking desktop applications. Various GUI frameworks offer different UI declaration and styling languages, such as QML and XAML (Microsoft WPF). On the contrary, Sciter allows using time proven, robust, and flexible HTML and CSS for GUI definition and GPU accelerated rendering.
Before using sciter I already tried other alternatives but none of them was satisfactory as an example first i tried andlabs/ui libraryi already have written a post on it. You can read it on post gui programming with golang.  But this library is still under construction and has no support for production apps.
Secondly, I go for electron but the problem was my simple calc like the app was of size 150mb. Which is 15mb of go and other was the electron. 
Before some time I found another alternative, s…

Cursor based navigation for datatable

I was working on a module where data was comming from datastore and paginated using cursor. If you are not familier with datastore, then you can refer to this link.

In case of datastore we just have cursor to get next set of data. Though there is offset availabe in datastore its costly. So to be cost effective we have only option available is cursor.

Datastore decodes cursor and in response returns data associated with that cursor.

Now, If you are using bootstrap data-table you might find it cofusing that how to pass the cursor to your queryparameter.

Even I still don't get answer of how I can change data-queryparamter dynamically to update cursor on the url.

But instead I got another simple solution.

HTML Snippet
<table id="table" data-toggle="table" >
    <thead>
      <tr>
       // your data table fields
      </tr>
    </thead>
    <tbody></tbody>
</table>
<nav aria-label="Page navigation example" style="margin-top: 2%;">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#"  onclick="fetchPrevdata()">Previous</a></li>
      <li class="page-item"><a class="page-link" href="#" id="nextData" onclick="fetchNextdata()">Next</a></li>
    </ul>
</nav>


Below is Javascript

$(document).ready(function () {
  fetchFirst();
});


var cursors = [""];
var index = 0;

function fetchFirst(){

  alert("fetchFirst called")
  var url = "/winners-data?c=" + cursors[index]
  $.get(url)
    .done(function (data)
    {
      if(index == cursors.length-1 ){
        cursors.push(data.Cursor);     
      }             
    })
}

function fetchNextdata()
{  
  index++
  var url = "/url?c=" + cursors[index] 
  $.get(url)
    .done(function (data)
    {
      if(index == cursors.length-1 ){
        cursors.push(data.Cursor);          
      }   
      if (data.rows != null) {       
        $table.bootstrapTable('load', data.rows)
      }  
    })
}

function fetchPrevdata()
{
  index--;
  var url = "/url?c=" +  cursors[index]
  $.get(url)
    .done(function (data)
    {
      if (data.rows != null) {
        $table.bootstrapTable('load', data.rows)     
      }        
    })
}


Hopefully, You find it useful. If you any otherway to do this please share it via comments.

Comments

Popular posts from this blog

Sciter : GUI Application with Golang using HTML/CSS

setup hyperledger fabric on windows 10

Apache : setup basic auth with apache in windows