ajaxed - Numbering Rows and making them clickable

Thats just a quick tutorial as it outlines some new addition which came with v 2.0.1. It makes it easier now to create a link on a whole record. Before it was necessary to create an event handler for each column and surround the output with an a href tag. But what if you need something quick?

Here it comes. Check the recordLink property. It allows us to set a link which will be applied to each cell of each record. The best thing is that you can specify placeholders which will be replaced with a data value on each record iteration. In other words, you can create a record link with one line of code:

table.recordLink = "modfify.asp?id={id}"

Did you recognize the placeholder? {id} will be replaced with the value of the column named id on each record iteration. Lets have a look at a working example:

<!--#include virtual="/page.asp"-->
<!--#include virtual="/ajaxed/class_datatable/datatable.asp"-->
<%
set table = new Datatable
set page = new AjaxedPage
page.draw()

sub init()
  table.sql = "SELECT id, title, created_on FROM active_articles"
  table.recordlink = "javascript:alert('The id is: {id} and ive been created on {created_on}')"
end sub

sub callback(a)
  table.draw()
end sub

sub main()
  table.draw()
end sub
%>

Run this code — recordlink.asp

Ok nice. But what if we want to disable the link some specified columns? Sometimes you change the columns output on runtime and it would break your design if each column would be surrounded with an ahref tag. For that we can use the link property of DatatableColumn and set it to false:

<!--#include virtual="/page.asp"-->
<!--#include virtual="/ajaxed/class_datatable/datatable.asp"-->
<%
set table = new Datatable
set page = new AjaxedPage
page.draw()

sub init()
  table.sql = "SELECT * FROM active_articles"
  table.recordlink = "javascript:alert('The id is: {id} and ive been created on {created_on}')"
  'for that we need to add the columns manually
  table.newColumn("id", "ID").link = false
  table.newColumn "title", "Title"
  table.newColumn "created_on", "Created"
end sub

sub callback(a)
  table.draw()
end sub

sub main()
  table.draw()
end sub
%>

Run this code — recordlinkDisable.asp

If you feel funny (or maybe you really need it) you could create a record link like in the following example as well:

<!--#include virtual="/page.asp"-->
<!--#include virtual="/ajaxed/class_datatable/datatable.asp"-->
<%
set table = new Datatable
set page = new AjaxedPage
page.draw()

sub init()
  table.sql = "SELECT id, title, created_on FROM active_articles"
  table.onRowCreated = "onRow"
end sub

sub onRow(dt)
  'setting the link on the whole row.
  'it will be placed into the TR tag directly
  dt.row.attributes = "onclick=""alert('The id is: " & dt.data("id") & " and ive been created on " & dt.data("created_on") & "')"""
end sub

sub callback(a)
  table.draw()
end sub

sub main()
  table.draw()
end sub
%>

Run this code — recordLinkOnRow.asp

Thats just an example of what would be possible but its not recommended unless you really need it. We manipulated the attributes property of each row for that.

Numbering records

A last quick example demonstrates how to number your records. So the first gets always a 1, the second a 2, etc. Here we go:

<!--#include virtual="/page.asp"-->
<!--#include virtual="/ajaxed/class_datatable/datatable.asp"-->
<%
set table = new Datatable
set page = new AjaxedPage
page.draw()

sub init()
  with table
    .sql = "SELECT * FROM active_articles"
    'we use the ID column to place the number into it
    .newColumn("id", "").onCellCreated = "onID"
    .newColumn "title", "Title"
    .newColumn "created_on", "Created"
    'turn on paging so you see how it affects numbering
    .recsPerPage = 10
  end with
end sub

function onID(dt)
  'pass the row number and ignore the actual value (ID)
  onID = dt.row.number
end function

sub callback(a)
  table.draw()
end sub

sub main()
  table.draw()
end sub
%>

Run this code — numberedRecords.asp

Numbering Rows and making them clickable Datatable

Related Articles

Discuss

Numbering records

Posted in Datatable 5594 days ago