Good afternoon, I wanted to know how to make a DataGrid in HTML5 more or less similar to the image below?
In any case, for you to set up a DataGrid in Html, you will need to foreach the values.
Example
// header da tabela
string tabPedidos = "";
tabPedidos += "<table class='table table-bordered'><tr>";
tabPedidos += "<td>#</td>";
tabPedidos += "<td>Status:</td>";
tabPedidos += "<td>Valor:</td>";
tabPedidos += "<td>Data (R$):</td>";
tabPedidos += "<td></td>";
tabPedidos += "</tr>";
// no caso, pego os valores via DataSet
PedidoFuncs ped = new PedidoFuncs();
DataSet ds = ped.GetPedidos();
int i = 0;
int j = 0;
// foreach nos valores
foreach (DataTable table in ds.Tables)
{
foreach (DataRow dr in table.Rows)
{
// atribuindo valores para as variaveis
int codPed = Int32.Parse(ds.Tables[i].Rows[j]["ID"].ToString());
string dataHora = ds.Tables[i].Rows[j]["DATAHORA"].ToString();
string valPed = ds.Tables[i].Rows[j]["VALOR"].ToString();
string statusPed = ds.Tables[i].Rows[j]["STATUS"].ToString();
string resultPed = "";
string classPed = "";
if (statusPed == "1")
{
resultPed = "Aprovado";
classPed = "success";
}
else if (statusPed == "0")
{
resultPed = "Aguardando aprovação";
classPed = "warning";
}
else if (statusPed == "2")
{
resultPed = "Pagamento cancelado";
classPed = "danger";
}
else if (statusPed == "-1")
{
resultPed = "Não Aprovado";
classPed = "danger";
}
// alimentando a tabela
tabPedidos += "<tr class='" + classPed + "'>";
tabPedidos += "<td>" + codPed + "</td>";
tabPedidos += "<td>" + resultPed + "</td>";
tabPedidos += "<td>R$ " + valPed + "</td>";
tabPedidos += "<td>" + dataHora + "</td>";
tabPedidos += "<td><a href='Pedido.aspx?id=" + codPed + "' class='btn btn-primary'>Visualizar</a></td>";
tabPedidos += "</tr>";
j++;
}
i++;
}
tabPedidos += "</table>"; // fechando a tabela
divPedidos.InnerHtml = tabPedidos; //publicando a tabela dentro de uma div
There is no datagrid component in HTML, you have to create it using a table, in the language you are developing.
Here you can find some in javascript:
There are also paid options like this for ASP.NET MVC Telerik Grid