Assigned (Set) jQuery DataTable Column width in ASP.Net

Last Reply 3 months ago By pandeyism

Posted 3 months ago

how to add width for a particular column in jquery  datatable.

example: set width for column 'name'

below is the code reference from

Edit Update jQuery DataTables row in Bootstrap Modal Popup using Ajax JSON and WebService in ASP.Net

You are viewing reply posted by: pandeyism 3 months ago.
Posted 3 months ago

Hi jovceka,

Check the below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"
        type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" />
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                url: '<%= Page.ResolveUrl("~/WebService.asmx/GetFiles")%>',
                method: 'post',
                dataType: 'json',
                success: function (data) {
                    $('#datatable').dataTable({
                        "processing": true,
                        "paging": true,
                        "columnDefs": [
                        { width: 50, targets: 0 },
                        { width: 75, targets: 1 },
                        { width: 100, targets: 2 },
                        { width: 50, targets: 3 }
                       ],
                        "searching": { "regex": true },
                        "responsive": true,
                        data: data,
                        columns: [
                            { 'data': 'Id' },
                            { 'data': 'Name' },
                            {
                                'data': 'Data',
                                'render': function (Data) {
                                    if (!Data) {
                                        return 'N/A';
                                    }
                                    else {
                                        var img = 'data:image/png;base64,' + Data;
                                        return '<img src="' + img + '" height="50px" width="50px" />';
                                    }
                                }
                            },
                            {
                                "data": null,
                                "defaultContent": '<input type="button" id="btnEdit" class="btn btn-primary" value="Edit" />'
                            }
                        ]
                    });
                }, error: function (response) {
                    alert(response.responseText);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 100%; border: 1px solid black; padding: 3px">
        <table id="datatable" class="table table-striped table-bordered dt-responsive nowrap"
            cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>f_Name</th>
                    <th>Data</th>
                    <th>Edit</th>
                </tr>
            </thead>
        </table>
    </div>
    </form>
</body>
</html>

WebService

WebServiceCS.cs

using System;
using System.Collections.Generic;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.Web.Script.Serialization;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
    public class File
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Data { get; set; }
    }

    [WebMethod]
    public void GetFiles()
    {
        string cs = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        List<File> files = new List<File>();
        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("SELECT TOP 3 id,Name,Data FROM tblFiles", con);
            cmd.CommandType = CommandType.Text;
            con.Open();
            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                File file = new File();
                file.Id = Convert.ToInt32(rdr["id"]);
                file.Name = rdr["Name"].ToString();
                file.Data = Convert.ToBase64String((byte[])rdr["Data"]);
                files.Add(file);
            }
        }
        JavaScriptSerializer js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(files));
    }
}

Screenshot