Flexigrid not applied for html table

170 Views Asked by At

I am trying to integrate flexigrid for html table as below,

    <spring:url value="https://code.jquery.com/jquery-3.0.0.js" var="migrate" />
            <script src="${migrate}"></script>
             <spring:url value="https://code.jquery.com/jquery-migrate-3.0.0.js" var="migrae1"/>
            <script src="${migrae1}"></script>
              <spring:url value="/resources/js/flexigrid.pack.js" var="flexijs" />
            <script src="${flexijs}"></script>
    <spring:url value="/resources/css_flexi/flexigrid.css" var="flexicss" />
            <link href="${flexicss}" rel="stylesheet" />
             <spring:url value="/resources/css_flexi/flexigrid.pack.css" var="choosen" />
            <link href="${choosen}" rel="stylesheet" />

$(document).ready(function () {
             $('.flexme').flexigrid();
});
 <form id="Form1" style="margin-left:5%;padding-top: 10px;">

     <table id="roles" class="flexme">
           <thead>
            <tr>
                <th width="100">Col 1</th>
                <th width="100">Col 2</th>
                <th width="100">Col 3 is a long header name</th>
                <th width="300">Col 4</th>

            </tr>
    </thead>
    <tbody>
            <tr>
                <td>This is data 1</td>
                <td>This is data 2</td>
                <td>This is data 3</td>

                <td>This is data 4</td>
            </tr>
            <tr>

                <td>This is data 1</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
      </tbody> 
                           </table>
                            </form>

However it is not working. I spent a long time is finding the error. It din't help me. Even checked in many websites.So finally thought to post it here. can anyone suggest me where I am going wrong? Thanks in advance.

1

There are 1 best solutions below

0
techhunter On

I got this working as below:

  1. I included this flexigrid call inside a click event since it was not getting executed in document.load when there is error.

  2. I found "msie of undefined error". I have tried using "migrate" plugin. Still the error was same.

  3. So I used:

    jQuery.browser = {}; (function () { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })();

Now it is working properly. But for paging and refresh part, One has to rely on server side pagination.