@{
    ViewBag.Title = "Index";
}

<h2>Clientes</h2>

<div style="width:90%; margin:0 auto;">
    <table id="myTable">
        <thead>
            <tr>
                <th>Codigo</th>
                <th>Nome</th>
                <th>Cidade</th>
                <th>Telefone</th>
                <th>Email</th>
                <th>Cidade</th>
            </tr>
        </thead>
    </table>
</div>
<style>
    tr.even {
        background-color: #F5F5F5 !important;
    }
</style>
@* Load datatable css *@
<link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
@* Load datatable js *@
@section Scripts{
    <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#myTable').DataTable({
                "ajax": {
                    "url": "/clientes/CarregaDados",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "Codigo", "autoWidth": true },
                    { "data": "Nome", "autoWidth": true },
                    { "data": "Endereco", "autoWidth": true },
                    { "data": "Telefone", "autoWidth": true },
                    { "data": "Email", "autoWidth": true },
                    { "data": "Cidade", "autoWidth": true }
                ]
            });
        });
    </script>
}
=======================================================================================================================
@{
    ViewBag.Title = "ClientesLista";
}

<link href="~/Content/dataTables.bootstrap.min.css" rel="stylesheet" />
<style>
    span.field-validation-error {
        color: red;
    }
</style>

<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12" >
                            <table id="myDataTable" class="table table-bordered table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>Cliente Perfil</th>
                                        <th>Cliente ID</th>
                                        <th>Cliente Nome</th>
                                        <th>Cliente Email</th>
                                        <th>Cliente Fone</th>
                                        <th>Cliente Estado</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <!-- /.row (nested) -->
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
</div>
<!-- /#page-wrapper -->

@section Scripts{
    <!-- JS -->
    @*<script src="~/Scripts/jquery-1.10.2.min.js"></script>*@
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    @*<script src="~/Scripts/bootstrap.min.js"></script>*@
    <script src="~/Scripts/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Pega os dados do banco de dados para preencher o datatable
            var oTable = $("#myDataTable").DataTable({

                "processing": true, // for show progress bar
                //"serverSide": true, // for process server side
                "filter": true, // this is for disable filter (search box)
                //"orderMulti": false, // for disable multiple column at once
                "start": 0,
                "order": [0, "asc"],
                "pageLength": 3,

                "ajax": {
                    "url": "/Clientes/GetClientes",
                    "type": "GET",
                    "dataType": "json"
                },
                "columns": [
                    {
                        "data": "ClienteImagem", "width": "50px", "render": function (data) {
                            return '<img class="rounded img-thumbnail" style="width:90px; height:50px;" src="/Imagens/Clientes/' + data + '"/>';
                        }
                    },
                    { "data": "ID", "autowidth": true },
                    { "data": "ClienteNome", "autowidth": true },
                    { "data": "ClienteEmail", "autowidth": true },
                    { "data": "ClienteFone", "autowidth": true },
                    { "data": "ClienteEstado", "autowidth": true },
                ]
            });
        });
    </script>
}  
----------------------------------------------------------------------
CREATE TABLE [dbo].[Clientes](
	[ID] [int] IDENTITY(1,1) NOT NULL,
	[ClienteNome] [nvarchar](100) NOT NULL,
	[ClienteEmail] [nvarchar](100) NOT NULL,
	[ClienteFone] [nvarchar](100) NOT NULL,
	[ClienteEstado] [nvarchar](100) NOT NULL,
	[ClienteImagem] [nvarchar](max) NULL,
 CONSTRAINT [PK_dbo.Clientes] PRIMARY KEY CLUSTERED 
(
	[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
----------------------------------------------------------------------------------