Print jQuery DataTable with serial number in ASP.Net MVC

Share screenshot of your issue.

one image is of datatable index column before printing , it is showing numbers but as i click on print command, index column changes into [object][object]

Hi sunnyk21,

Refer below code.

To display the image you need to convert the relative image url to absolute url.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Model

public class EmployeeModel
{
    public string Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string PostalCode { get; set; }
    public string Region { get; set; }
    public string Selectedyear { get; set; }
    public string SelectedMonth { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        List<SelectListItem> Monthname = new List<SelectListItem>();
        Monthname.Add(new SelectListItem { Text = "January", Value = "1" });
        Monthname.Add(new SelectListItem { Text = "February", Value = "2" });
        Monthname.Add(new SelectListItem { Text = "March", Value = "3" });
        Monthname.Add(new SelectListItem { Text = "April", Value = "4" });
        Monthname.Add(new SelectListItem { Text = "May", Value = "5" });
        Monthname.Add(new SelectListItem { Text = "June", Value = "6" });
        Monthname.Add(new SelectListItem { Text = "July", Value = "7" });
        Monthname.Add(new SelectListItem { Text = "August", Value = "8" });
        Monthname.Add(new SelectListItem { Text = "September", Value = "9" });
        Monthname.Add(new SelectListItem { Text = "October", Value = "10" });
        Monthname.Add(new SelectListItem { Text = "November", Value = "11" });
        Monthname.Add(new SelectListItem { Text = "December", Value = "12" });
        TempData["Month"] = Monthname;
        var startyear = 2010;
        TempData["Years"] = new SelectList(Enumerable.Range(startyear, 20)
            .Select(x => new SelectListItem()
            {
                Text = x.ToString(),
                Value = x.ToString()
            }), "Value", "Text");
        return View();
    }

    public ActionResult LoadData(string year, string month)
    {
        string st = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        List<EmployeeModel> feedbacks = new List<EmployeeModel>();
        using (SqlConnection con = new SqlConnection(st))
        {
            con.Open();
            using (SqlCommand cmd = new SqlCommand("Select * from Employees", con))
            {
                using (SqlDataReader rd = cmd.ExecuteReader())
                {
                    while (rd.Read())
                    {
                        feedbacks.Add(new EmployeeModel
                        {
                            Id = rd["EmployeeId"].ToString(),
                            FirstName = rd["FirstName"].ToString(),
                            LastName = rd["LastName"].ToString(),
                            Address = rd["Address"].ToString(),
                            City = rd["City"].ToString(),
                            Country = rd["Country"].ToString(),
                            PostalCode = rd["PostalCode"].ToString(),
                            Region = rd["Region"].ToString()
                        });
                    }
                }
            }
            con.Close();
        }
        return Json(new { data = feedbacks }, JsonRequestBehavior.AllowGet);
    }
}

View

<html">
<head">
    <title>Feedbacks Received Through DHI Website For t</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.semanticui.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.semanticui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.19/dataRender/datetime.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
    <script type="text/javascript">
        $(function () {
            ApplyDataTable("");
        });

        jQuery.extend(jQuery.fn.dataTableExt.oSort, {
            "date-uk-pre": function (a) {
                var ukDatea = a.split('/');
                return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
            },
            "date-uk-asc": function (a, b) {
                return ((a < b) ? -1 : ((a > b) ? 1 : 0));
            },
            "date-uk-desc": function (a, b) {
                return ((a < b) ? 1 : ((a > b) ? -1 : 0));
            }
        });

        function ApplyDataTable(year, month, monthname) {
            $.ajax({
                url: '/Home/LoadData',
                type: 'GET',
                dataType: 'json',
                data: { year: year, month: month },
                success: function (data) {
                    var table = $('#FeedbackDetails').DataTable({
                        "bDestroy": true,
                        dom: '<"row"<"col-sm-6"Bl><"col-sm-6"f>>' +
                            '<"row"<"col-sm-12"<"table-responsive"tr>>>' +
                            '<"row"<"col-sm-5"i><"col-sm-7"p>>',
                        buttons: [
                            {
                                extend: 'print',
                                messageTop: '<u> Feedbacks Received Through DHI Website For The Month Of ' + monthname + ' Of Year ' + year + '<br /><br /><br />',
                                messageBottom: '<center><p style="margin-top:10px">Created and Designed by NIC-DHI'
                            },
                        ],
                        "columnDefs": [{
                            "searchable": false,
                            "orderable": false,
                            "targets": 0
                        }],
                        "order": [[1, 'asc']],
                        "aaData": data.data,
                        "lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]],
                        "autoWidth": true,
                        "responsive": true,
                        "lengthChange": true,
                        "ordering": true,
                        "columns": [
                             { "data": "Id", "name": "Id", "autoWidth": true },
                            { "data": "FirstName", "name": "First Name", "autoWidth": true },
                            { "data": "LastName", "name": "Last Name", "autoWidth": true },
                            { "data": "Address", "name": "Address", "autoWidth": true },
                            { "data": "City", "name": "City", "autoWidth": true },
                            { "data": "Country", "name": "Country", "autoWidth": true },
                            { "data": "PostalCode", "name": "Pin Code", "autoWidth": true },
                            { "data": "Region", "name": "Region", "autoWidth": true }
                        ],
                        "language": {
                            "emptyTable": "No Events Found Related To This Month or Year"
                        }
                    });
                    table.on('order.dt search.dt', function () {
                        table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                            cell.innerHTML = i + 1;
                            table.cell(cell).invalidate('dom');
                        });
                    }).draw();
                }
            });
        }
    </script>
</head>
<body>
    <table style="margin-top: 25px" id="tbldrpdown">
        <tr>
            <td>List Of DHI Feedbacks For Year</td>
            <td><%:Html.DropDownListFor(model => model.Selectedyear, (IEnumerable<SelectListItem>)TempData["Years"], "--Select Year--", new { @class = "form-control", onchange = "UserChanged()" })%></td>
            <td>&nbsp; and Month &nbsp;</td>
            <td><%:Html.DropDownListFor(model => model.SelectedMonth, (IEnumerable<SelectListItem>)TempData["Month"], "--Select Month--", new { @class = "form-control", onchange = "UserChanged()" })%></td>
        </tr>
    </table>
    <label style="color: red">
        *Kindly Select Margin as Default While Taking Print Out and Remove Check From Header
        And Footer*</label>
    <div class="container" style="margin-top: 20px">
        <table id="FeedbackDetails" class="ui celled table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>Country</th>
                    <th>Postal</th>
                    <th>Region</th>
                </tr>
            </thead>
        </table>
    </div>
</body>
</html>

Screenshot