How to make a DataGrid in HTML5? [closed]

-3

Good afternoon, I wanted to know how to make a DataGrid in HTML5 more or less similar to the image below?

    
asked by anonymous 13.02.2017 / 20:49

2 answers

1

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 
    
14.02.2017 / 11:23
1

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

    
14.02.2017 / 15:02