Javascript code for printing on paper!!!

Dreal1

Member
Joined
Apr 27, 2017
Messages
10
Programming Experience
Beginner
greetings my fellow programmers, please i'm working on a project and i have been finding it difficult to print with this javascript code in my mvc, below because it print all the entire page and not the selected page.
kindly assist me with a printing code/ javascript code for printing or a solution to this my issue{ thanks in anticipation}

HTML:
@model IEnumerable<MVCPERSONNEL.Models.Staff>


@{
    ViewBag.Title = "STAFF INFORMATION";
}
<p>


    @Html.ActionLink("Add New Staff", "Create") | 
[U][B]// HERE IS THE JAVASCRIPT CODE FOR PRINTING AND I DECLARE A DIV ID T0 BE #DIV1  [/B][/U]
<a href="javascript:window.print('#div1')">Print</a>
</p>

[U][B]// STARTING DIV[/B][/U]
<div  id="div1" style="overflow:scroll; width:100%;">
    <table class="table">
        <caption class="caption"> All Staff Information</caption>
        <thead style=" text-align:center; background-color:#ffffff; border-left:thin; border-right:thin; border-bottom:thin;  border-color:aliceblue; border-width:thin; ">




            <tr style=" background-color: black; color: white; text-align: center; border-bottom: 1px dashed #999;">
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">
                    Title
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">
                    SurName
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">
                    First Name
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">
                    Middle Name
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">
                    Other Name
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">
                    Gender
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">
                    Maiden Name
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">
                    Date of Birth
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">
                    Date of First Appointment
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">
                    Confirmation Date
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">
                    State of Origin
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-left: 1px dashed #999; border-width: thin; ">
                    Local Govt.
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    Grade Level On Entry
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    Designation On Entry
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    IppisNo
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    Date Of Present Appointment
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    Conhess/Conmess
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    Step
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    Present Designation
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    Mobile Number
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    Email
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    Staff Number
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    CreatedBy
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    ModifyBy
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    Role
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999;">
                    Department
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    Grade Level
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    Password
                </th>
                <th style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: white; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    Photo Upload
                </th>
            </tr>
        </thead>


        @foreach (var item in Model)
        {
            <tr style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width:thin; border-left: 1px dashed #999; ">


                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.Title)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.Surname)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.Firstname)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.Middlename)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.Othername)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999;">
                    @Html.DisplayFor(modelItem => item.Gender)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.MaidenName)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.DOB)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.DOFA)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999;">
                    @Html.DisplayFor(modelItem => item.DOC)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.Origin)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.LG)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.GLOE)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.DOE)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.IppisNo)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.DOLA)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.Conhess_Conmess)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.Step)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.PD)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.Mobile)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.Email_Address)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.StaffNo)
                    </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.CreatedBy)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999;">
                    @Html.DisplayFor(modelItem => item.Modifyby)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999;">
                    @Html.DisplayFor(modelItem => item.Roll.RoleDescription)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.Department.DeptName)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.Gl)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.Passwordx)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999; ">
                    @Html.DisplayFor(modelItem => item.PhotoURL)
                </td>
                <td style="text-align: center; border-bottom: 1px dashed #999; border-right: 1px dashed #999; border-color: black; border-top: 1px dashed #999; border-width: thin; border-left: 1px dashed #999;">
                    @Html.ActionLink("Edit", "Edit", new { id = item.StaffId })|@Html.ActionLink("Details", "Details", new { id = item.StaffId })|@Html.ActionLink("Delete", "Delete", new { id = item.StaffId })
                </td>
            </tr>
        }


    </table>
</div>
 
Back
Top Bottom