Hi jovceka,
Wrap the column data in a div and set the white-space and width css properties for the div.
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
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 type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></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">
$(function () {
$.ajax({
url: '<%= Page.ResolveUrl("~/WebService.asmx/GetCustomers")%>',
method: 'post',
dataType: 'json',
success: function (data) {
$('#datatable').dataTable({
"processing": true,
"paging": true,
"searching": { "regex": true },
"responsive": true,
data: data,
columns: [
{ 'data': 'Id', width: "50px" },
{ 'data': 'Name', width: "100px" },
{ 'data': 'Notes' },
],
columnDefs: [{
render: function (data, type, full, meta) {
return "<div id='dvNotes' style='white-space: normal;width: 250px;'>" + data + "</div>";
},
targets: 2
}]
});
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table id="datatable" class="table table-striped table-bordered dt-responsive">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Notes</th>
</tr>
</thead>
</table>
</form>
</body>
</html>
WebService
C#
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;
[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 Customer
{
public int Id { get; set; }
public string Name { get; set; }
public string Notes { get; set; }
}
[WebMethod]
public void GetCustomers()
{
string cs = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
List<Customer> customers = new List<Customer>();
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("SELECT EmployeeId,FirstName,Notes FROM Employees", con);
cmd.CommandType = CommandType.Text;
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
Customer customer = new Customer();
customer.Id = Convert.ToInt32(rdr["EmployeeId"]);
customer.Name = rdr["FirstName"].ToString();
customer.Notes = rdr["Notes"].ToString();
customers.Add(customer);
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(customers));
}
}
VB.Net
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
' <System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
Inherits System.Web.Services.WebService
Public Class Customer
Public Property Id As Integer
Public Property Name As String
Public Property Notes As String
End Class
<WebMethod()>
Public Sub GetCustomers()
Dim cs As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim customers As List(Of Customer) = New List(Of Customer)()
Using con As SqlConnection = New SqlConnection(cs)
Dim cmd As SqlCommand = New SqlCommand("SELECT EmployeeId,FirstName,Notes FROM Employees", con)
cmd.CommandType = CommandType.Text
con.Open()
Dim rdr As SqlDataReader = cmd.ExecuteReader()
While rdr.Read()
Dim customer As Customer = New Customer()
customer.Id = Convert.ToInt32(rdr("EmployeeId"))
customer.Name = rdr("FirstName").ToString()
customer.Notes = rdr("Notes").ToString()
customers.Add(customer)
End While
End Using
Dim js As JavaScriptSerializer = New JavaScriptSerializer()
Context.Response.Write(js.Serialize(customers))
End Sub
End Class
Screenshot
