Click here to Skip to main content
15,896,730 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
i have list of user
using datatable i display .
having edit button in each row.
1st page popup modal open perfectly but after 2nd page it not open.

in pagination first 10 record butoon click popup open

after 2 page click (datatable) popup not work....when i click on edit but nothing happend.

What I have tried:

$(document).ready(function () {

       var datatable_documentskillmastertype = $('#data-table-skillmaster-type').DataTable(
       {
           "aoColumnDefs": [{
               bSortable: false,
               aTargets: [3, 4, 2]
           }],

       });




//data list in datatable
<!--DataTables example Row grouping-->
               <div id="row-grouping" class="section">
                   <div class="row">
                       <div class="col s12">
                           <table id="data-table-skillmaster-type" class="display" cellspacing="0">
                               <thead class="blue lighten-5">
                                   <tr>
                                       <th class="center-align">Sr. No</th>
                                       <th>Skill Name</th>
                                       <th>Description</th>
                                      <th class="center-align">Action</th>
                                   </tr>
                               </thead>
                               <tbody>
                                   @if (Model != null)
                                   {
                                       int i = 1;
                                       foreach (var item in Model)
                                       {
                                           <tr>
                                               <td class="center-align">@i </td>
                                               <td>@item.SkillName</td>
                                               <td>@item.SkillDiscription</td>
                                             <td class="center-align">
                                                   @*<button class="btn btn-danger btn-circle" type="button" onclick="GetSelectedQuote(@item.QuoteId);" data-toggle="modal" data-backdrop="static" data-keyboard="false"> class="fa fa-edit"></button>*@
                                                   <a href="#task-modal" title="Modify Skill" onclick="GetSelectedSkill(@item.SkillId);" class="btn-floating waves-effect waves-light darken-2   grid-btn-bg  modal-trigger">^__i class="mdi-editor-mode-edit"></a>
                                               </td>
                                           </tr>
                                                               i++;
                                                           }
                                                       }
                               </tbody>
                           </table>
                       </div>
                   </div>
               </div>
               <!-- End Dtatable-->






<!--start modalPopup-->
      <div id="task-modal" class="modal">
          <nav class="task-modal-nav cyne">
              <div class="nav-wrapper">
                  <div class="left col s12 m5 l5">
                      <ul>
                          <li>
                              <a href="#!" class="todo-add">Skill Type</a>
                          </li>

                      </ul>
                  </div>
                  <div class="right col s12 m5 l5">
                      <ul>
                          <li>
                              <a href="#!" class="todo-menu" onclick="ClearModel();">class="modal-action modal-close  mdi-navigation-close"></a>
                          </li>

                      </ul>

                  </div>
              </div>
          </nav>
          <div class="modal-content">
              @using (Html.BeginForm("SkillAdd", "SystemPreferences", FormMethod.Post, new { @id = "frmskill", @class = "col s12 right-alert" }))
              {
                  <div class="row" id="clearbody">
                      @Html.Partial("_AddSkill", new Utility.Model.SkillMaster())
                  </div>

              }
          </div>
      </div>
      <!--end modalPopup-->
Posted
Updated 4-Apr-18 20:15pm
v4
Comments
Karthik_Mahalingam 6-Nov-17 5:32am    
what do you mean by after 2nd page it not open
not clear,
Use Improve question to add more info to the question.
Jaydeep Shah 6-Nov-17 8:56am    
i have list of record of data and button is end of each row (Edit).
in datatable first 10 row working perfectly .after click 2 page my modal popup not open .
Karthik_Mahalingam 6-Nov-17 9:22am    
you wil have to rebind the modal events to the newly created rows.
post the relevant code
Jaydeep Shah 7-Nov-17 0:01am    
Hi @karthik i update my code.

list data have last td tag where popup open code ...

Karthik_Mahalingam 7-Nov-17 1:51am    
this line for modal ?
<a href="#task-modal" title="Modify Skill" class="btn-floating waves-effect waves-light darken-2   grid-btn-bg  modal-trigger"></a>

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900