How to make a Datagrid in HTML5?

Asked

Viewed 970 times

-3

Good afternoon, I was wondering how to make a Datagrid in HTML5 more or less similar to the image below?

inserir a descrição da imagem aqui

php html5 css3

  • Do you need to make a table? Or do you need the functions that the datagrid contains? If you have the features, you need to make a table and implement the javascript functionality.

  • I need to do a Datagrid to receive records that are recorded in the database.

  • What language are you using in the backend? Asp.net?

  • In the backend I’m using php, I want to do a Datagrid in Html5 and php more or less equal to Asp.net @Diegomoreira , thanks for your attention :)

  • Boy, php is easier. Same scheme as I told you in reply /. Good luck. :)

  • Thank you @Diegomoreira :)

Show 1 more comment

2 answers

1


In any case, for you to mount 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

1

  • Thank you for this valuable information @Washingtondacosta :)

Browser other questions tagged php html5 css3

You are not signed in. Login or sign up in order to post.