href not working with data-table paging

Question

My code works well. I am using Data-table for paging and searching . My Problem is , when i switch to next page and click on a link the page redirection not working but in the first page all things works well . The page redirects to next page by using jquery .

aspx code

<div class="box-body no-padding">
                            <div>
                                <table id="example2" class="table table-responsive">
                                    <thead>
                                        <tr>
                                            <th>From</th>
                                            <th></th>
                                            <th>Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <%if (DtInbox.Rows.Count > 0)
                                          {
                                              for (int i = 0; i < DtInbox.Rows.Count; i++)
                                              {
                                        %>
                                        <tr>
                                            <%if (DtInbox.Rows[i]["SStatus"].ToString() == "New")
                                              {%>
                                            <td class="mailbox-name"><a class="a" href="#" id="<%=DtInbox.Rows[i]["Mb_IdNo"]  %>">
                                                <%=DtInbox.Rows[i]["Name"] %></a></td>
                                            <%} %>
                                            <%if (DtInbox.Rows[i]["SStatus"].ToString() == "Viewed")
                                              {%>
                                            <td class="mailbox-name"><a class="a" href="#" id="<%=DtInbox.Rows[i]["Mb_IdNo"]  %>">
                                                <span style="font-weight: 500"><%=DtInbox.Rows[i]["Name"] %></span></a></td>
                                            <%} %>
                                            <td class="mailbox-subject"><b><%=DtInbox.Rows[i]["Subject"] %></b>
                                                &nbsp;-&nbsp;<span style="font-style: italic"><%=DtInbox.Rows[i]["Message"] %></span>...</td>
                                            <td class="mailbox-date" style="padding-right: 20px; font-weight: 400">
                                                <%=Convert.ToDateTime(DtInbox.Rows[i]["Date"]).ToString("dd-MMM-yyyy") %></td>
                                        </tr>
                                        <%}
                                          }
                                          else
                                          { %>
                                        <tr>
                                            <td class="mailbox-name">No Data To Show </td>
                                        </tr>
                                        <% }   
                                        %>
                                    </tbody>
                                </table>
                                <!-- /.table -->
                            </div>
                            <!-- /.mail-box-messages -->
                        </div>

jquery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#example2').DataTable();
            $('.a').click(function () {
                var id = this.id;
                var $form =
                    $("<form/>").attr("id", "data_form").attr("action", "Mailbox-Rinbox.aspx").attr("method", "post");
                $("body").append($form);
                AddParameter($form, "Md_Idno", id);
                $form[0].submit();
            });
            function AddParameter(form, name, value) {
                var $input = $("<input />").attr("type", "hidden").attr("name", name).attr("value", value);
                form.append($input);
            }
        });
    </script>

Answer 1

replace your $('.a').click(function () { with $(document).on('click', '.a', function(){ on your jquery load

as why it work, this is due to the how the DOM work, as the 1st page of href is work due to it load on DOM ready, while subsequent click is not, you can refer to this for more accurate explanation https://stackoverflow.com/a/14879213/1874308