New demo: IWGrid + DataTables (and almost no code)

[Alexandre Machado]

Hi,

We've been asked to create a demo showing how to use a IWGrid with DataTables (http://datatables.net). So here is the online version:

http://intraweb.net.br/IWGridDataTables/

Souce code in our git hub demo repo (link in the online demo)

Please notice that there is almost no code. All code is basically loading the grid from any data source (in that case we load it from a ClientDataSet, but it could be from any source, of course).

The server hosting this demo itself shows another interesting feature of how IW http.sys applications work: Several IW applications running as independent services using the same port (80). (you can see another demo app running in http://intraweb.net.br/ImageButtons/ )

Enjoy 

[MJS@mjs.us]

Code:

Example of loading dataTables.net from custom content handler:

//---------------------------------------------------------------------------
In OnFormCreate:
//---------------------------------------------------------------------------
void __fastcall TCategoryForm::IWAppFormCreate(TObject *Sender)
{
      ExtraHeader->Add(
      "<script>"
        "$(document).ready(function() {"
          "$(\"#CATEGORY\").DataTable({ "
            "ordering: false,"
            "ajax: '/Data3',"
          "});"
        "});"
      "</script>"
      );

      txtHTML->RawText = true;
      txtHTML->Lines->Text =
        "<table class=\"display\" id=\"CATEGORY\">"
        "<thead>"
        "<tr>"
        "<th>ID</th>"
        "<th>Name</th>"
        "<th>Type</th>"
        "<th>Check Desc</th>"
        "<th>Activity Desc</th>"
        "</tr>"
        "</thead>"
        "</table>"
        ;
}
//---------------------------------------------------------------------------
To reload on an async event:
//---------------------------------------------------------------------------
void __fastcall TCategoryForm::btnAsyncClick(TObject *Sender, TStringList *EventParams)
{
  WebApplication->CallBackResponse->AddJavaScriptToExecuteAsCDATA(
  "$(\"#CATEGORY\").DataTable().ajax.reload(null,false);"
  );
}
//---------------------------------------------------------------------------
In server controller:
//---------------------------------------------------------------------------
class TContentData3: public TContentBase
{
  protected:

    virtual bool __fastcall Execute(Iw::Http::Request::THttpRequest* aRequest, Iw::Http::Reply::THttpReply* aReply, const System::UnicodeString aPathname, Iwapplication::TIWApplication* aSession, System::Classes::TStrings* aParams);

  public:

    __fastcall TContentData3(void);

};
//---------------------------------------------------------------------------
void __fastcall TIWServerController::IWServerControllerBaseConfig(TObject *Sender)
{
    THandlers::Add("","/Data3", new TContentData3());
}
//---------------------------------------------------------------------------
__fastcall TContentData3::TContentData3(void)
{
  mFileMustExist = false;
  mRequiresSessionStart = true;
}
//---------------------------------------------------------------------------
bool __fastcall TContentData3::Execute(Iw::Http::Request::THttpRequest* aRequest, Iw::Http::Reply::THttpReply* aReply, const System::UnicodeString aPathname, Iwapplication::TIWApplication* aSession, System::Classes::TStrings* aParams)
{
  TIWUserSession *us = (TIWUserSession*)WebApplication->Data;
  us->qryTmp->Active = false;
  us->qryTmp->SQL->Text = "SELECT * FROM CATEGORY ORDER BY ID;";
  us->qryTmp->Active = true;

  aReply->ContentType = "text/plain";
  String s = "{ \"data\": [";
  while(!us->qryTmp->Eof) {

    s+="["
        "\""+us->qryTmp->FieldByName("ID")->AsString+"\","
        "\""+us->qryTmp->FieldByName("NAME")->AsString+"\","
        "\""+us->qryTmp->FieldByName("TYPE")->AsString+"\","
        "\""+us->qryTmp->FieldByName("DATA_COL1")->AsString+"\","
        "\""+us->qryTmp->FieldByName("DATA_COL2")->AsString+"\""
        "]";

    if(us->qryTmp->RecNo < us->qryTmp->RecordCount) { s+=","; }

    us->qryTmp->Next();
  }
  us->qryTmp->Active = false;

  s+="] }";

  aReply->WriteString(s);
  return true;
}
//---------------------------------------------------------------------------

[SorenJensen]

Thanks Alexandre for the example, the link and short description. It really look nice and I'm quite impressed how it looks and what I can do.

and Thanks MJS for the code example. Coding in delphi, it's really not that difficult to find out what's going on the the example.

I have also been through a lot on the Datatables.net homepage, and been trying to figure out how to make use of it in my application.

However a lot of it is new to me and I have, in vain it appears, been trying to see a link to a MS SQL table. I can see that the table itself can be viewed as a matrix and as such it perfect for the DataTables.net concept, but I fail to see how to combine them

I've downloaded the example and tried to figure out how to use one of my SQL tables in stead. Not successfully unfortunately.

Do anybody know how to and if, would you care to share your knowledge ?

Regards
Soren

[MJS@mjs.us]

Hi Soren,


>> how to use one of my SQL tables in stead.

If you scroll to the bottom of my example you'll see I'm creating the json string (to be passed to a datatable) using a SQL query so should work very similarly in your case.  The keys are setting the ajax parameter in the new datatable, e.g. "ajax: '/Data3'," then creating a custom content handler in IW responding to requests on /Data3 to serve up the required json data to populate the table.  Sample of Delphi custom content handler.
[url=https://github.com/Atozed/IntraWeb/tree/master/XIV/Delphi/CustomContentHandlers][/url]
Regards,
Mark

[SorenJensen]

Hi Mark,

Thanks. I did see the Select at the bottom of your script, but did not realize the connection was within the content handler.

I'll check it out and hopefully find a workable solution for me.

Regards
Soren

[ShaneStump]

Howdy all!

I am not sure how I missed this, but this really looks promising!

Has anyone wrapped it as a bootstrap 4 compatible component / interface?

I really think this could be quite helpful for a responsive data driven web app.

All the best,

Shane

P.S. Just did a quick google and I have bookmarked this thread along with this page to have a look:

https://datatables.net/examples/styling/bootstrap4.html

[Álvaro Vieira]

Hi,

We've been asked to create a demo showing how to use a IWGrid with DataTables (http://datatables.net). So here is the online version:

http://intraweb.net.br/IWGridDataTables/

Souce code in our git hub demo repo (link in the online demo)

Please notice that there is almost no code. All code is basically loading the grid from any data source (in that case we load it from a ClientDataSet, but it could be from any source, of course).

The server hosting this demo itself shows another interesting feature of how IW http.sys applications work: Several IW applications running as independent services using the same port (80). (you can see another demo app running in http://intraweb.net.br/ImageButtons/ )

Enjoy 

----------------

In this example, you load the entire contents of the table and the DataTable does the filters.

Is there an example that shows how to use server side filters (search)?

[Alexandre Machado]

Hi Álvaro,

There is no example doing server side search/filtering ready to be used. It is not difficult to do it though...

I'll see if I can upload something to help you with this

[ioan]

Hi,

We've been asked to create a demo showing how to use a IWGrid with DataTables (http://datatables.net). So here is the online version:

http://intraweb.net.br/IWGridDataTables/

Souce code in our git hub demo repo (link in the online demo)

Please notice that there is almost no code. All code is basically loading the grid from any data source (in that case we load it from a ClientDataSet, but it could be from any source, of course).

The server hosting this demo itself shows another interesting feature of how IW http.sys applications work: Several IW applications running as independent services using the same port (80). (you can see another demo app running in http://intraweb.net.br/ImageButtons/ )

Enjoy 

----------------

In this example, you load the entire contents of the table and the DataTable does the filters.

Is there an example that shows how to use server side filters (search)?

---

Hi Álvaro,

I was able to follow this video and it's pretty easy and it works very well. There is also a link with the code in the video description:

https://www.youtube.com/watch?v=sD7UAHz3BYk

[sirmikealot]

Greetings. The demo is excellent, but as of yet I am not able to figure out how to get the datatables to 'refresh' after I edit, add or delete.
Do you have any coding examples of that ?

Essentially I'm using IWTemplateProcessor, and "onunknowntag" - the event to draw the table's rows.
Everything looks nice and works great, but no method of refresh or draw shows changes to the table.