lundi 5 octobre 2015

database value populate as checkbox inside table row using json

I want to view following database table using json

enter image description here

I can populate Property ID and Property Title but I cannot populate Is-checked column value as Check-box

this is code upto now

    <table class="table">
    <thead>
        <tr>
        <th>Property ID</th>
        <th>IsChecked</th>
        <th>Property Tile</th>
        </tr>
    </thead>
    <tbody id="table"></tbody>
</table>

<table id="template" class="table" style="display: none;">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>


</table>


<script type="text/javascript">

</script>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")




    <script type="text/javascript">

            var url = '@Url.Action("FetchProductProperties")';
            var editUrl = '@Url.Action("Edit")';

            var type = $('#Type');
            var category = $('#Category');
            var country = $('#Country');
            var product = $('#Product');


            var template = $('#template');
            var table = $('#table');
            $('#search').click(function () {
                table.empty();
                $.getJSON(url, { type: type.val(), category: category.val(), country: country.val(), product: product.val() }, function (data) {
                    $.each(data, function (index, item) {
                        var clone = template.clone();
                        var cells = clone.find('td');
                        cells.eq(0).text(item.ID);
                        if (item.CheckOrNot === 'true') {
                            cells.eq(1).find('input[type="checkbox"]').prop('checked', true);
                        }
                        cells.eq(2).text(item.Name);
                        table.append(clone.find('tr'));
                    });
                });
            });

            $('#resetborchure').click(function () {
                table.empty();
            });

    </script>


}

Is there any other alternative to do this without json.like ajax call

this is how its look like now

enter image description here




Aucun commentaire:

Enregistrer un commentaire